<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">LNG船型基本信息</div>

      <div class="loadAndSearch">
        <div class="loadExcel" style="width: 460px">
          <div class="button" type="success" @click="uploadFile1()">导入</div>
          <div class="button" type="success" @click="getExcelFile1()">导出</div>
          <div class="button" type="success" @click="addOne()">新增</div>
          <div class="multiButton" type="success" @click="deleteMulti()">
            删除
          </div>
          <el-select
            style="margin-left: 10px; width: 150px"
            v-model="chooseShipName"
            size="small"
          >
            <el-option label="海港未来" value="海港未来"></el-option>
            <el-option label="淮河启航" value="淮河启航"></el-option>
          </el-select>
        </div>

        <div class="iconInfoMation">
          <div class="iconInfoContain">
            <el-icon size="20" color="#27B250"><CircleCheckFilled /></el-icon>
            <div>:完成</div>
          </div>
          <div class="iconInfoContain">
            <el-icon color="#A6A6A6" size="20"><RemoveFilled /></el-icon>
            <div>:未完成</div>
          </div>
          <div class="iconInfoContain">
            <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
            <div>:不匹配</div>
          </div>
          <div class="iconInfoContain">
            <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
            <div>:待审核</div>
          </div>
          <div class="iconInfoContain">
            <el-icon color="#2E54A1" size="20"><QuestionFilled /></el-icon>
            <div>:未开始</div>
          </div>
        </div>
        <div class="search" style="width: 350px !important">
          <input
            type="text"
            placeholder="船公司/船舶类型/船型/共享船型/船舶名/IMO"
            v-model="searchText"
            style="width: 277px !important"
          />
          <div class="searchButton" @click="getRenderList()">搜索</div>
        </div>
      </div>

      <div class="table" :style="{ width: tableWidth }">
        <el-table
          empty-text="暂无数据"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#777676 !important',
            fontWeight: '800',
          }"
          :data="tableData"
          border
          stripe
          style="width: 100%; height: auto"
          :row-style="{ height: 30 + 'px' }"
          :cell-style="{ padding: 0 + 'px' }"
          max-height="65vh"
          @selection-change="selecttableFunction"
          @row-dblclick="handleRowDblclick"
        >
          <el-table-column type="selection" width="35" align="center" />
          <el-table-column
            type="index"
            :index="indexNumber"
            align="center"
            label="序号"
            min-width="55"
          >
          </el-table-column>
          <!-- "船公司" -->
          <el-table-column
            prop="shipCompany"
            label="船公司"
            align="center"
            min-width="90"
          />
          <!-- 运营公司 -->

          <el-table-column
            prop="shipType"
            label="船舶类型"
            min-width="90"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="shipTypeNum"
            label="船型"
            align="center"
            min-width="120"
            ><template #default="scope">
              <div
                class="bigLight"
                @mouseover="handleMouseOver"
                @mouseleave="handleMouseLeave"
              >
                {{ scope.row.shipTypeNum }}
                <div
                  class="bigLightSon"
                  :data-text="scope.row"
                  @click="showPromise(scope.row.id)"
                >
                  复制
                </div>
              </div>
            </template></el-table-column
          >
          <el-table-column
            prop="shareShipType"
            label="共享船型"
            align="center"
            min-width="120"
          >
            <template #default="scope">
              <div v-html="getShipTypeList(scope.row.shareShipType)"></div>
            </template>
          </el-table-column>

          <el-table-column label="船舶名" min-width="150" align="center">
            <template #default="scope">
              <el-popover
                placement="top"
                popper-class="custom-popover"
                trigger="click"
                :popper-style="{ width: 'auto' }"
                style="background: rgba(0, 0, 0, 0.5)"
                v-if="scope.row.filledShipList.length > 0"
              >
                <div class="popoperInnerBox" style="">
                  <div
                    style="text-align: center; height: 20px"
                    v-for="item in scope.row.filledShipList"
                  >
                    {{ item.englishName }}
                  </div>
                </div>

                <template #reference>
                  <div class="activeText activeTextDetail">详情</div>
                </template>
              </el-popover>
            </template>
            <!-- <template #default="scope">
              <div
                class="activeText activeTextDetail"
                style="position: relative"
              >
                详情
                <div
                  style="
                    width: 100%;
                    background: rgba(0, 0, 0, 0.2);
                    position: absolute;
                    top: 0;
                    right: 0px;
                    z-index: 100000000;
                  "
                  v-if="scope.row.filledShipList.length > 0"
                >
                  <div
                    style="width: 100%; color: white"
                    v-for="item in scope.row.filledShipList"
                  >
                    {{ item.englishName }}
                  </div>
                </div>
              </div>
            </template> -->
          </el-table-column>

          <el-table-column label="兼容性匹配" align="center" min-width="160">
            <el-table-column
              prop="haiGangCompatibilityCompatible"
              label="海港未来"
              align="center"
              min-width="85"
            >
              <template #default="{ row }">
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 3, row.id)"
                  v-if="row.haiGangCompatibilityCompatible == '完成'"
                >
                  <el-icon size="20" color="#27B250"
                    ><CircleCheckFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 3, row.id)"
                  v-else-if="row.haiGangCompatibilityCompatible == '未完成'"
                >
                  <el-icon color="#A6A6A6" size="20"><RemoveFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 3, row.id)"
                  v-else-if="row.haiGangCompatibilityCompatible == '不匹配'"
                >
                  <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 3, row.id)"
                  v-else-if="row.haiGangCompatibilityCompatible == '待审核'"
                >
                  <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 3, row.id)"
                  v-else-if="row.haiGangCompatibilityCompatible == '未开始'"
                >
                  <el-icon color="#2E54A1" size="20"
                    ><QuestionFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 3, row.id)"
                  v-else
                ></div>
              </template>
            </el-table-column>
            <el-table-column
              prop="huaiHeCompatibilityCompatible"
              label="淮河启航"
              align="center"
              min-width="110"
            >
              <template #default="{ row }">
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 3, row.id)"
                  v-if="row.huaiHeCompatibilityCompatible == '完成'"
                >
                  <el-icon size="20" color="#27B250"
                    ><CircleCheckFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 3, row.id)"
                  v-else-if="row.huaiHeCompatibilityCompatible == '未完成'"
                >
                  <el-icon color="#A6A6A6" size="20"><RemoveFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 3, row.id)"
                  v-else-if="row.huaiHeCompatibilityCompatible == '不匹配'"
                >
                  <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 3, row.id)"
                  v-else-if="row.huaiHeCompatibilityCompatible == '待审核'"
                >
                  <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 3, row.id)"
                  v-else-if="row.huaiHeCompatibilityCompatible == '未开始'"
                >
                  <el-icon color="#2E54A1" size="20"
                    ><QuestionFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 3, row.id)"
                  v-else
                ></div> </template
            ></el-table-column>
          </el-table-column>
          <el-table-column label="系泊分析" align="center" min-width="100">
            <el-table-column
              prop="haiGangMoorCompatible"
              label="海港未来"
              align="center"
              min-width="85"
            >
              <template #default="{ row }">
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 4, row.id)"
                  v-if="row.haiGangMoorCompatible == '完成'"
                >
                  <el-icon size="20" color="#27B250"
                    ><CircleCheckFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 4, row.id)"
                  v-else-if="row.haiGangMoorCompatible == '未完成'"
                >
                  <el-icon color="red" size="20"><RemoveFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 4, row.id)"
                  v-else-if="row.haiGangMoorCompatible == '不匹配'"
                >
                  <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 4, row.id)"
                  v-else-if="row.haiGangMoorCompatible == '待审核'"
                >
                  <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 4, row.id)"
                  v-else-if="row.haiGangMoorCompatible == '未开始'"
                >
                  <el-icon color="#2E54A1" size="20"
                    ><QuestionFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 4, row.id)"
                  v-else
                ></div>
              </template>
            </el-table-column>
            <el-table-column
              prop="huaiHeMoorCompatible"
              label="淮河启航"
              align="center"
              min-width="110"
            >
              <template #default="{ row }">
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 4, row.id)"
                  v-if="row.huaiHeMoorCompatible == '完成'"
                >
                  <el-icon size="20" color="#27B250"
                    ><CircleCheckFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 4, row.id)"
                  v-else-if="row.huaiHeMoorCompatible == '未完成'"
                >
                  <el-icon color="#A6A6A6" size="20"><RemoveFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 4, row.id)"
                  v-else-if="row.huaiHeMoorCompatible == '不匹配'"
                >
                  <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 4, row.id)"
                  v-else-if="row.huaiHeMoorCompatible == '待审核'"
                >
                  <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 4, row.id)"
                  v-else-if="row.huaiHeMoorCompatible == '未开始'"
                >
                  <el-icon color="#2E54A1" size="20"
                    ><QuestionFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 4, row.id)"
                  v-else
                ></div> </template
            ></el-table-column>
          </el-table-column>
          <el-table-column
            label="气体逸散风险研究"
            align="center"
            min-width="100"
          >
            <el-table-column
              prop="haiGangRiskCompatible"
              label="海港未来"
              align="center"
              min-width="85"
              ><template #default="{ row }">
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 5, row.id)"
                  v-if="row.haiGangRiskCompatible == '完成'"
                >
                  <el-icon size="20" color="#27B250"
                    ><CircleCheckFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 5, row.id)"
                  v-else-if="row.haiGangRiskCompatible == '未完成'"
                >
                  <el-icon color="#A6A6A6" size="20"><RemoveFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 5, row.id)"
                  v-else-if="row.haiGangRiskCompatible == '不匹配'"
                >
                  <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 5, row.id)"
                  v-else-if="row.haiGangRiskCompatible == '待审核'"
                >
                  <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 5, row.id)"
                  v-else-if="row.haiGangRiskCompatible == '未开始'"
                >
                  <el-icon color="#2E54A1" size="20"
                    ><QuestionFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, 5, row.id)"
                  v-else
                ></div> </template
            ></el-table-column>
            <el-table-column
              prop="huaiHeRiskCompatible"
              label="淮河启航"
              align="center"
              min-width="110"
              ><template #default="{ row }">
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 5, row.id)"
                  v-if="row.huaiHeRiskCompatible == '完成'"
                >
                  <el-icon size="20" color="#27B250"
                    ><CircleCheckFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 5, row.id)"
                  v-else-if="row.huaiHeRiskCompatible == '未完成'"
                >
                  <el-icon color="#A6A6A6" size="20"><RemoveFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 5, row.id)"
                  v-else-if="row.huaiHeRiskCompatible == '不匹配'"
                >
                  <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 5, row.id)"
                  v-else-if="row.huaiHeRiskCompatible == '待审核'"
                >
                  <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 5, row.id)"
                  v-else-if="row.huaiHeRiskCompatible == '未开始'"
                >
                  <el-icon color="#2E54A1" size="20"
                    ><QuestionFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(2, 5, row.id)"
                  v-else
                ></div> </template
            ></el-table-column>
          </el-table-column>
        </el-table>
        <!-- 内容过多，会出现滚动条 -->
      </div>

      <div class="foot">
        <div class="currentPage">当前第{{ page }}/{{ totalPages }}页</div>
        <div
          class="lastPage"
          :style="{ background: color }"
          @click="clickLastPage()"
        >
          上一页
        </div>
        <div
          class="nextPage"
          :style="{ backgroundColor: color1 }"
          @click="clickNextPage()"
        >
          下一页
        </div>
        <div class="currentNumber">共{{ totalNumber }}条</div>
        <div>跳转至:</div>
        <input
          type="text"
          class="skipPage"
          style="width: 50px !important"
          v-model="shipPageNumer"
        />
        <div class="sureSkip" @dbClick="skipPage">确定</div>
      </div>
    </div>
    <div class="dialog" ref="dialog" :style="{ display: show }">
      <div class="loadHomeWorkIneer">
        <div class="topTabButton">
          <!-- v-show="addOrEdit == '新增'" -->
          <div
            class="tabOne"
            :class="{ tabOneActive: isActive === 1 }"
            @click="changeChooseTable(1)"
          >
            船舶基本信息
          </div>
          <div
            class="tabOne"
            :class="{ tabOneActive: isActive === 2 }"
            @click="changeChooseTable(2)"
            style="margin-left: 10px"
          >
            船舶清单
          </div>
          <div
            class="tabOne"
            :class="{ tabOneActive: isActive === 3 }"
            @click="changeChooseTable(3)"
            style="margin-left: 10px"
          >
            兼容性研究
          </div>
          <div
            class="tabOne"
            :class="{ tabOneActive: isActive === 4 }"
            @click="changeChooseTable(4)"
            style="margin-left: 10px"
          >
            系泊研究
          </div>
          <div
            class="tabOne"
            :class="{ tabOneActive: isActive === 5 }"
            @click="changeChooseTable(5)"
            style="margin-left: 10px"
          >
            同步作业风险评估
          </div>
          <div
            class="tabOne"
            :class="{ tabOneActive: isActive === 6 }"
            @click="changeChooseTable(6)"
            style="margin-left: 10px"
          >
            JPO报告
          </div>
        </div>
        <div class="changeTop">
          <div
            class="delete"
            @click="deleteOne(id)"
            v-show="addOrEdit == '编辑'"
          >
            删除
          </div>
          <div class="sure" @click="sureAdd()">确认</div>
          <div class="back" @click="backToIndex()">返回</div>
        </div>
        <div
          class="manyInputContain"
          style="width: 1600px; margin: auto; display: flex"
        >
          <div class="manyInput" v-show="isActive === 1">
            <div class="dialogText">1.船舶基本信息</div>

            <div class="iuptInnerContain">
              <div class="inputInner">
                <div class="name">船舶型号:</div>
                <input
                  type="text"
                  placeholder="船型编号"
                  v-model="shipTypeNum"
                />
              </div>
              <div class="inputInner">
                <div class="name">船公司:</div>
                <input
                  type="text"
                  name=""
                  placeholder="船公司"
                  v-model="shipCompany"
                />
              </div>
              <div class="inputInner">
                <div class="name">船舶类型:</div>
                <!-- <input type="text" placeholder="船舶类型" v-model="shipType" /> -->
                <el-select
                  v-model="shipType"
                  style="width: 210px; margin-left: 5px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in shipTypeAll"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>
              <div class="inputInner">
                <div class="name">共享船型:</div>
                <!-- <el-input
                v-model="haiGangYellowRestrictedArea"
                style="
                  width: 210px;
                  height: 200px;
                  padding: 0;
                  margin-left: 5px;
                "
                type="textarea"
                placeholder="请输入"
              /> -->
                <el-select
                  style="width: 210px; margin-left: 5px"
                  v-model="shareShipType"
                  :no-data-text="'无数据'"
                  multiple
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in shipTypeList"
                    :label="item || ''"
                    :value="item || ''"
                  ></el-option>
                </el-select>
              </div>
              <div class="inputInner">
                <div class="name">船长:</div>
                <input
                  type="number"
                  name=""
                  placeholder="船长"
                  v-model="shipLength"
                />
              </div>
              <div class="inputInner">
                <div class="name">型深:</div>
                <input
                  type="number"
                  name=""
                  placeholder="型深"
                  v-model="depthMoulded"
                />
              </div>
              <div class="inputInner">
                <div class="name">船宽:</div>
                <input
                  type="number"
                  name=""
                  placeholder="船宽"
                  v-model="shipWidth"
                />
              </div>
              <div class="inputInner">
                <div class="name">吃水:</div>
                <input
                  type="number"
                  name=""
                  placeholder="吃水"
                  v-model="summerMaximumDraft"
                />
              </div>
              <div class="inputInner">
                <div class="name">液货舱型:</div>
                <el-select
                  v-model="cargoTankType"
                  style="width: 210px; margin-left: 5px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in cargoTankTypeAll"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>

              <div class="inputInner">
                <div class="name">液货舱舱容:</div>
                <input
                  type="number"
                  name=""
                  placeholder="液货舱舱容"
                  v-model="cargoTankCapacity"
                />
              </div>
              <div class="inputInner">
                <div class="name">靠泊方式:</div>

                <el-select
                  v-model="berthingMethod"
                  style="width: 210px; margin-left: 5px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in berthingMethodAll"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>
              <div class="inputInner">
                <div class="name">最大加注速率:</div>
                <input
                  type="number"
                  name=""
                  placeholder="最大加注速率"
                  v-model="maxFillingRate"
                />
              </div>
              <div class="inputInner">
                <div class="name">加注站位置:</div>

                <el-select
                  v-model="fillingPosition"
                  style="width: 210px; margin-left: 5px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in positionAll"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>
              <div class="inputInner">
                <div class="name">碰垫吊高:</div>

                <el-select
                  v-model="bumpHeight"
                  style="width: 210px; margin-left: 5px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in bumpHeightAll"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>
              <div class="inputInner">
                <div class="name">液相连接形式:</div>

                <el-select
                  multiple
                  clearable
                  v-model="liquid_connection_form"
                  style="width: 210px; margin-left: 5px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in shose_connection_formAll"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>
              <div class="inputInner">
                <div class="name">气相连接形式:</div>

                <el-select
                  v-model="gas_connection_form"
                  multiple
                  clearable
                  style="width: 210px; margin-left: 5px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in shose_connection_formAll"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>

              <div class="inputInner">
                <div class="name">加注站布置:</div>
                <el-select
                  v-model="fillingStation"
                  multiple
                  clearable
                  style="width: 210px; margin-left: 5px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in fillingStationAll"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>

              <div class="inputInner">
                <div class="name">氮气软管接头类型:</div>

                <el-select
                  v-model="nitrogenPipeType"
                  style="width: 210px; margin-left: 5px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in nitrogenPipeTypeAll"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div
            class="imageContain"
            v-show="isActive === 1"
            style="width: 400px"
          >
            <div class="shipPictrue">
              <img
                class="shipTypePictrue"
                :src="imageSrc(this.image)"
                alt=""
                @click="clickUpLoad(10)"
              />
            </div>
          </div>
        </div>
        <div class="manyInput" v-show="isActive === 2">
          <div class="dialogText">2.船舶清单</div>
          <div
            class="loadAndSearch"
            style="width: 90%; margin: auto; justify-content: flex-end"
          >
            <div
              class="search"
              style="width: 200px !important"
              v-show="addOrEdit == '编辑'"
            >
              <input
                type="text"
                placeholder="英文船名"
                v-model="searchText1"
                style="width: 136px !important"
              />
              <div class="searchButton" @click="findFillShipList()">搜索</div>
            </div>
          </div>
          <el-table
            empty-text="暂无数据"
            border
            :row-style="{ height: 30 + 'px' }"
            :header-cell-style="{
              background: '#FAFAFA',
              color: '#777676 !important',
              fontWeight: '800',
            }"
            :cell-style="{ padding: 0 + 'px' }"
            style="width: 90%; height: auto; margin: auto; margin-top: 20px"
            max-height="60vh"
            :data="filledShipList"
          >
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="100"
            >
            </el-table-column>
            <el-table-column align="center" prop="chineseName" label="中文船名">
              <template #default="scope">
                <div class="scopeInnerBox">
                  <input type="text" v-model="scope.row.chineseName" />
                </div> </template
            ></el-table-column>
            <el-table-column align="center" prop="englishName" label="英文船名"
              ><template #default="scope">
                <div class="scopeInnerBox">
                  <input type="text" v-model="scope.row.englishName" />
                </div> </template
            ></el-table-column>
            <el-table-column align="center" prop="imo" label="IMO">
              <template #default="scope">
                <div class="scopeInnerBox">
                  <input type="text" v-model="scope.row.imo" />
                </div> </template
            ></el-table-column>
            <el-table-column align="center" prop="remark" label="船用邮箱">
              <template #default="scope">
                <div class="scopeInnerBox">
                  <input type="text" v-model="scope.row.remark" />
                </div> </template
            ></el-table-column>
            <el-table-column align="center" label="操作" width="100">
              <template #default="scope">
                <div
                  class="deleteOneObj"
                  style="
                    margin: auto;
                    width: 20px;
                    height: 20px;
                    font-size: 14px;
                    background: #f646ff;
                    border-radius: 50%;
                    color: white;
                    line-height: 19px;
                  "
                  @click="deleteOneObj(scope.$index, scope.row)"
                >
                  —
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="addOneObj" @click="addOneObject(1)">+</div>
        </div>
        <div class="manyInput" v-show="isActive === 3">
          <div class="dialogText" style="margin-top: 10px">3.兼容性研究</div>
          <div class="iuptInnerContain" v-show="chooseShipName == '海港未来'">
            <div class="inputInner">
              <div class="name" style="width: 125px">完成情况:</div>
              <el-select
                style="width: 240px; margin-left: 5px"
                v-model="haiGangCompatibilityCompatible"
                :no-data-text="'无数据'"
                placeholder="请选择"
              >
                <el-option label="完成" value="完成"></el-option>
                <el-option label="未完成" value="未完成"></el-option>
                <el-option label="不匹配" value="不匹配"></el-option>
                <el-option label="待审核" value="待审核"></el-option>
                <el-option label="未开始" value="未开始"></el-option>
              </el-select>
            </div>
            <div class="jianrongList" style="margin-top: 20px">
              <div class="line2">海港未来</div>
              <div class="line1"></div>
              <div class="line3">
                <input type="text" v-model="shipTypeNum" />
              </div>
              <div class="line4"></div>
            </div>
            <div class="jianrongList">
              <div
                class="line2"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 150px;
                "
              >
                <img :src="imageSrc(this.haiGangPic)" alt="" style="" />
              </div>
              <div
                class="line1"
                style="
                  height: 150px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                项目
              </div>

              <div
                class="line3"
                style="
                  height: 150px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img :src="imageSrc(this.image)" alt="" />
              </div>
              <div
                class="line4"
                style="
                  height: 150px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                匹配情况
              </div>
            </div>
            <div class="jianrongList">
              <div class="line2">
                <input type="text" v-model="haiGangFilledShipModels[0]" />
              </div>
              <div class="line1">光电缆品牌型号</div>

              <div class="line3">
                <input type="text" v-model="haiGangFilledShipModels[1]" />
              </div>
              <div class="line4">
                <el-checkbox
                  v-if="haiGangFilledShipModels[2]"
                  v-model="haiGangFilledShipModels[2]"
                  size="large"
                ></el-checkbox>
                <el-checkbox
                  v-else="!haiGangFilledShipModels[2]"
                  v-model="haiGangFilledShipModels[2]"
                  size="large"
                ></el-checkbox>
                <!-- <input type="checkBox" v-model="haiGangFilledShipModels[2]" /> -->
              </div>
            </div>
            <div class="jianrongList">
              <div class="line2">
                <input type="text" v-model="haiGangFillStationPosition[0]" />
              </div>
              <div class="line1">加注站布置</div>

              <div class="line3">
                <input type="text" v-model="haiGangFillStationPosition[1]" />
              </div>
              <div class="line4">
                <el-checkbox
                  v-if="haiGangFillStationPosition[2]"
                  v-model="haiGangFillStationPosition[2]"
                  size="large"
                ></el-checkbox>
                <el-checkbox
                  v-else="!haiGangFillStationPosition[2]"
                  v-model="haiGangFillStationPosition[2]"
                  size="large"
                ></el-checkbox>
              </div>
            </div>
            <div class="jianrongList">
              <div class="line2">
                <input type="text" v-model="haiGangNitrogenTubeMatching[0]" />
              </div>
              <div class="line1">氮气管匹配</div>

              <div class="line3">
                <input type="text" v-model="haiGangNitrogenTubeMatching[1]" />
              </div>
              <div class="line4">
                <el-checkbox
                  v-if="haiGangNitrogenTubeMatching[2]"
                  v-model="haiGangNitrogenTubeMatching[2]"
                  size="large"
                ></el-checkbox>
                <el-checkbox
                  v-else="!haiGangNitrogenTubeMatching[2]"
                  v-model="haiGangNitrogenTubeMatching[2]"
                  size="large"
                ></el-checkbox>
              </div>
            </div>
            <div class="jianrongList">
              <div class="line2">
                <input type="text" v-model="haiGangFillPosition[0]" />
              </div>
              <div class="line1">加注位置</div>

              <div class="line3">
                <input type="text" v-model="haiGangFillPosition[1]" />
              </div>
              <div class="line4">
                <input type="text" v-model="haiGangFillPosition[2]" />
              </div>
            </div>
            <div class="jianrongList" style="border-bottom: 1px solid #ebeef5">
              <div class="line2">
                <input type="text" v-model="haiGangFenderPosition[0]" />
              </div>
              <div class="line1">碰垫布置</div>

              <div class="line3">
                <input type="text" v-model="haiGangFenderPosition[1]" />
              </div>
              <div class="line4">
                <input type="text" v-model="haiGangFenderPosition[2]" />
              </div>
            </div>
          </div>
          <div class="iuptInnerContain" v-show="chooseShipName == '淮河启航'">
            <div class="inputInner">
              <div class="name" style="width: 125px">完成情况:</div>
              <el-select
                style="width: 240px; margin-left: 5px"
                v-model="huaiHeCompatibilityCompatible"
                :no-data-text="'无数据'"
                placeholder="请选择"
              >
                <el-option label="完成" value="完成"></el-option>
                <el-option label="未完成" value="未完成"></el-option>
                <el-option label="不匹配" value="不匹配"></el-option>
                <el-option label="待审核" value="待审核"></el-option>
                <el-option label="未开始" value="未开始"></el-option>
              </el-select>
            </div>
            <div class="jianrongList" style="margin-top: 20px">
              <div class="line2">淮河启航</div>
              <div class="line1"></div>
              <div class="line3">
                <input type="text" v-model="shipTypeNum" />
              </div>
              <div class="line4"></div>
            </div>
            <div class="jianrongList">
              <div
                class="line2"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 150px;
                "
              >
                <img :src="imageSrc(this.huaihePic)" alt="" style="" />
              </div>
              <div
                class="line1"
                style="
                  height: 150px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                项目
              </div>

              <div
                class="line3"
                style="
                  height: 150px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img :src="imageSrc(this.image)" alt="" />
              </div>
              <div
                class="line4"
                style="
                  height: 150px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                匹配情况
              </div>
            </div>
            <div class="jianrongList">
              <div class="line2">
                <input type="text" v-model="huaiHeFilledShipModels[0]" />
              </div>
              <div class="line1">光电缆品牌型号</div>

              <div class="line3">
                <input type="text" v-model="huaiHeFilledShipModels[1]" />
              </div>
              <div class="line4">
                <el-checkbox
                  v-if="huaiHeFilledShipModels[2]"
                  v-model="huaiHeFilledShipModels[2]"
                  size="large"
                ></el-checkbox>
                <el-checkbox
                  v-else="!huaiHeFilledShipModels[2]"
                  v-model="huaiHeFilledShipModels[2]"
                  size="large"
                ></el-checkbox>
                <!-- <input type="checkBox" v-model="haiGangFilledShipModels[2]" /> -->
              </div>
            </div>
            <div class="jianrongList">
              <div class="line2">
                <input type="text" v-model="huaiHeFillStationPosition[0]" />
              </div>
              <div class="line1">加注站布置</div>

              <div class="line3">
                <input type="text" v-model="huaiHeFillStationPosition[1]" />
              </div>
              <div class="line4">
                <el-checkbox
                  v-if="huaiHeFillStationPosition[2]"
                  v-model="huaiHeFillStationPosition[2]"
                  size="large"
                ></el-checkbox>
                <el-checkbox
                  v-else="!huaiHeFillStationPosition[2]"
                  v-model="huaiHeFillStationPosition[2]"
                  size="large"
                ></el-checkbox>
              </div>
            </div>
            <div class="jianrongList">
              <div class="line2">
                <input type="text" v-model="huaiHeNitrogenTubeMatching[0]" />
              </div>
              <div class="line1">氮气管匹配</div>

              <div class="line3">
                <input type="text" v-model="huaiHeNitrogenTubeMatching[1]" />
              </div>
              <div class="line4">
                <el-checkbox
                  v-if="huaiHeNitrogenTubeMatching[2]"
                  v-model="huaiHeNitrogenTubeMatching[2]"
                  size="large"
                ></el-checkbox>
                <el-checkbox
                  v-else="!huaiHeNitrogenTubeMatching[2]"
                  v-model="huaiHeNitrogenTubeMatching[2]"
                  size="large"
                ></el-checkbox>
              </div>
            </div>
            <div class="jianrongList">
              <div class="line2">
                <input type="text" v-model="huaiHeFillPosition[0]" />
              </div>
              <div class="line1">加注位置</div>

              <div class="line3">
                <input type="text" v-model="huaiHeFillPosition[1]" />
              </div>
              <div class="line4">
                <input type="text" v-model="huaiHeFillPosition[2]" />
              </div>
            </div>
            <div class="jianrongList" style="border-bottom: 1px solid #ebeef5">
              <div class="line2">
                <input type="text" v-model="huaiHeFenderPosition[0]" />
              </div>
              <div class="line1">碰垫布置</div>

              <div class="line3">
                <input type="text" v-model="huaiHeFenderPosition[1]" />
              </div>
              <div class="line4">
                <input type="text" v-model="huaiHeFenderPosition[2]" />
              </div>
            </div>
          </div>
        </div>
        <div class="manyInput" v-show="isActive === 4">
          <div class="dialogText" style="margin-top: 10px">4.系泊研究</div>

          <div class="centerInput1" v-show="chooseShipName == '海港未来'">
            <div class="centerNamePut">
              <div class="centerInputContain">
                <div class="inputInner">
                  <div class="name">完成情况:</div>

                  <el-select
                    style="width: 240px; margin-left: 5px"
                    v-model="haiGangMoorCompatible"
                    :no-data-text="'无数据'"
                    placeholder="请选择"
                  >
                    <el-option label="完成" value="完成"></el-option>
                    <el-option label="未完成" value="未完成"></el-option>
                    <el-option label="不匹配" value="不匹配"></el-option>
                    <el-option label="待审核" value="待审核"></el-option>
                    <el-option label="未开始" value="未开始"></el-option>
                  </el-select>
                </div>

                <div class="inputInner">
                  <div class="name">研究方:</div>
                  <input
                    type="text"
                    placeholder="研究方"
                    v-model="haiGangResearchTeam"
                  />
                </div>

                <div class="inputInner">
                  <div class="name">完成时间:</div>
                  <el-config-provider :locale="locale">
                    <el-date-picker
                      v-model="haiGangCompletionTime"
                      style="width: 240px; margin-left: 5px"
                      type="date"
                      placeholder="完成时间"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                    />
                  </el-config-provider>
                  <!-- <input
          type="text"
          placeholder="完成时间"
          v-model="haiGangCompletionTime"
        /> -->
                </div>

                <div class="inputInner">
                  <div class="name">STS报告编号:</div>
                  <input
                    type="text"
                    placeholder="STS报告编号"
                    v-model="haiGangReportNumber"
                  />
                </div>
                <div
                  class="inputInner"
                  style="justify-content: center; margin-left: 30px"
                >
                  <div class="name1" @click="clickUpLoad(0)">上传系泊图</div>
                  <div class="name1" @click="clickUpLoad(4)">上传STS报告</div>
                  <div
                    class="name1"
                    @click="
                      seePic(
                        this.$base +
                          '/download/shipType/' +
                          this.haiGangReportImg,
                        this.haiGangReportImg
                      )
                    "
                  >
                    查看STS报告
                  </div>
                </div>
              </div>
              <div class="centerPicContain" style="height: 400px">
                <div style="width: 100%; height: 100%; margin-top: 10px">
                  <img
                    class="img1"
                    :src="src1"
                    alt=""
                    width="100%"
                    height="100%"
                    @click="seePic(src1, src1)"
                  />
                </div>
              </div>
              <div class="dialogText1" style="margin-top: 15px">
                系泊方向及带缆要求
              </div>
              <div class="centerPicContain">
                <div class="aliLIne">
                  <div class="tableLeft1">
                    <div class="left1Child1">靠泊方向</div>
                    <div class="left1Child2">加注船左靠大船</div>
                    <div class="left1Child3">加注船右靠大船</div>
                  </div>
                  <div class="tableLeft2">
                    <div class="left1Child1">船首系缆</div>
                    <div class="left1Child2">
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.C2" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.C3" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.C4" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.C5" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.C6" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.C7" />
                        </div>
                      </div>
                    </div>
                    <div class="left1Child3"></div>
                  </div>
                  <div class="tableLeft2">
                    <div class="left1Child1">船尾系缆</div>
                    <div class="left1Child2">
                      <div class="splice">
                        <div class="spliceLeft">Stern Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.E2" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.E3" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.E4" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Stern Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.E5" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.E6" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="haiGangExcelJson.E7" />
                        </div>
                      </div>
                    </div>
                    <div class="left1Child3"></div>
                  </div>
                  <div class="tableLeft4">
                    <div class="left1Child1">系泊报告</div>
                    <div class="left1Child2">
                      <input type="text" v-model="haiGangExcelJson.F2" />
                    </div>
                    <div class="left1Child2">
                      <input type="text" v-model="haiGangExcelJson.F5" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="centerInput1" v-show="chooseShipName == '淮河启航'">
            <div class="centerNamePut">
              <div class="centerInputContain">
                <div class="inputInner">
                  <div class="name">完成情况:</div>

                  <el-select
                    style="width: 240px; margin-left: 5px"
                    v-model="huaiHeMoorCompatible"
                    :no-data-text="'无数据'"
                    placeholder="请选择"
                  >
                    <el-option label="完成" value="完成"></el-option>
                    <el-option label="未完成" value="未完成"></el-option>
                    <el-option label="不匹配" value="不匹配"></el-option>
                    <el-option label="待审核" value="待审核"></el-option>
                    <el-option label="未开始" value="未开始"></el-option>
                  </el-select>
                </div>

                <div class="inputInner">
                  <div class="name">研究方:</div>
                  <input
                    type="text"
                    placeholder="研究方"
                    v-model="huaiHeResearchTeam"
                  />
                </div>

                <div class="inputInner">
                  <div class="name">完成时间:</div>
                  <el-config-provider :locale="locale">
                    <el-date-picker
                      v-model="huaiHeCompletionTime"
                      style="width: 240px; margin-left: 5px"
                      type="date"
                      placeholder="完成时间"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                    />
                  </el-config-provider>
                </div>

                <div class="inputInner">
                  <div class="name">STS报告编号:</div>
                  <input
                    type="text"
                    placeholder="STS报告编号"
                    v-model="huaiHeStsReportNumber"
                  />
                </div>
                <div
                  class="inputInner"
                  style="justify-content: center; margin-left: 30px"
                >
                  <div class="name1" @click="clickUpLoad(1)">上传系泊图</div>
                  <div class="name1" @click="clickUpLoad(5)">上传STS报告</div>
                  <div
                    class="name1"
                    @click="
                      seePic(
                        this.$base +
                          '/download/shipType/' +
                          this.huaiHeStsReportImg,
                        this.huaiHeStsReportImg
                      )
                    "
                  >
                    查看STS报告
                  </div>
                </div>
              </div>
              <div class="centerPicContain" style="height: 400px">
                <div style="width: 100%; height: 100%; margin-top: 10px">
                  <img
                    class="img1"
                    :src="src2"
                    alt=""
                    width="100%"
                    height="100%"
                    @click="seePic(src2, src2)"
                  />
                </div>
              </div>
              <div class="dialogText1" style="margin-top: 15px">
                系泊方向及带缆要求
              </div>
              <div class="centerPicContain">
                <div class="aliLIne">
                  <div class="tableLeft1">
                    <div class="left1Child1">靠泊方向</div>
                    <div class="left1Child2">加注船左靠大船</div>
                    <div class="left1Child3">加注船右靠大船</div>
                  </div>
                  <div class="tableLeft2">
                    <div class="left1Child1">船首系缆</div>
                    <div class="left1Child2">
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.C2" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.C3" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.C4" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.C5" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.C6" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.C7" />
                        </div>
                      </div>
                    </div>
                    <div class="left1Child3"></div>
                  </div>
                  <div class="tableLeft2">
                    <div class="left1Child1">船尾系缆</div>
                    <div class="left1Child2">
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.E2" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.E3" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.E4" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.E5" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.E6" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="huaiHeExcelJson.E7" />
                        </div>
                      </div>
                    </div>
                    <div class="left1Child3"></div>
                  </div>
                  <div class="tableLeft4">
                    <div class="left1Child1">系泊报告</div>
                    <div class="left1Child2">
                      <input type="text" v-model="huaiHeExcelJson.F2" />
                    </div>
                    <div class="left1Child2">
                      <input type="text" v-model="huaiHeExcelJson.F5" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="manyInput" v-show="isActive === 5">
          <!-- 这里是同步作业风险 -->
          <div class="dialogText" style="margin-top: 10px">
            5.同步作业风险评估
          </div>
          <div
            class="centerInput1"
            style="padding-bottom: 20px"
            v-show="chooseShipName == '海港未来'"
          >
            <div class="centerNamePut">
              <div class="centerInputContain">
                <div class="inputInner">
                  <div class="name">完成情况:</div>

                  <el-select
                    style="width: 240px; margin-left: 5px"
                    v-model="haiGangRiskCompatible"
                    :no-data-text="'无数据'"
                    placeholder="请选择"
                  >
                    <el-option label="完成" value="完成"></el-option>
                    <el-option label="未完成" value="未完成"></el-option>
                    <el-option label="不匹配" value="不匹配"></el-option>
                    <el-option label="待审核" value="待审核"></el-option>
                    <el-option label="未开始" value="未开始"></el-option>
                  </el-select>
                </div>

                <div class="inputInner">
                  <div class="name">研究方:</div>
                  <input
                    type="text"
                    placeholder="研究方"
                    v-model="haiGangRiskResearchTeam"
                  />
                </div>

                <div class="inputInner" style="margin-left: 60px">
                  <div class="name2" @click="clickUpLoad(2)">
                    上传限制区域图
                  </div>
                  <div class="name2" @click="clickUpLoad(8)">
                    上传逸散分析报告
                  </div>
                  <div
                    class="name2"
                    @click="
                      seePic(
                        this.$base +
                          '/download/shipType/' +
                          this.haiGangEscapismReport,
                        this.haiGangEscapismReport
                      )
                    "
                  >
                    查看逸散分析报告
                  </div>
                </div>
              </div>
              <div
                class="centerPicContain"
                style="height: 400px; margin-top: 20px"
              >
                <div style="width: 100%; height: 100%">
                  <img
                    class="img1"
                    :src="src3"
                    alt=""
                    width="100%"
                    height="100%"
                    @click="seePic(src3, src3)"
                  />
                </div>
              </div>

              <div class="dialogText1" style="width: 100%">黄色限制区域</div>
              <el-input
                v-model="haiGangYellowRestrictedArea"
                style="width: 90%; margin: auto"
                :rows="6"
                type="textarea"
                placeholder="请输入"
              />
              <div class="dialogText1">红色限制区域</div>
              <el-input
                v-model="haiGangRedRestrictedArea"
                style="width: 90%; margin: auto"
                :rows="6"
                type="textarea"
                placeholder="请输入"
              />
            </div>
          </div>

          <!-- 淮河能源  -->
          <div
            class="centerInput1"
            style="padding-bottom: 20px"
            v-show="chooseShipName == '淮河启航'"
          >
            <div class="centerNamePut">
              <div class="centerInputContain">
                <div class="inputInner">
                  <div class="name">完成情况:</div>

                  <el-select
                    style="width: 240px; margin-left: 5px"
                    v-model="huaiHeRiskCompatible"
                    :no-data-text="'无数据'"
                    placeholder="请选择"
                  >
                    <el-option label="完成" value="完成"></el-option>
                    <el-option label="未完成" value="未完成"></el-option>
                    <el-option label="不匹配" value="不匹配"></el-option>
                    <el-option label="待审核" value="待审核"></el-option>
                    <el-option label="未开始" value="未开始"></el-option>
                  </el-select>
                </div>

                <div class="inputInner">
                  <div class="name">研究方:</div>
                  <input
                    type="text"
                    placeholder="研究方"
                    v-model="huaiHeRiskResearchTeam"
                  />
                </div>

                <div class="inputInner" style="margin-left: 60px">
                  <div class="name2" @click="clickUpLoad(3)">
                    上传限制区域图
                  </div>
                  <div class="name2" @click="clickUpLoad(9)">
                    上传逸散分析报告
                  </div>
                  <div
                    class="name2"
                    @click="
                      seePic(
                        this.$base +
                          '/download/shipType/' +
                          this.huaiHeEscapismReport,
                        this.huaiHeEscapismReport
                      )
                    "
                  >
                    查看逸散分析报告
                  </div>
                </div>
                <div
                  class="centerPicContain"
                  style="height: 400px; margin-top: 20px"
                >
                  <div style="width: 100%; height: 100%">
                    <img
                      class="img1"
                      :src="src4"
                      alt=""
                      width="100%"
                      height="100%"
                      @click="seePic(src4, src4)"
                    />
                  </div>
                </div>
                <div class="dialogText1" style="margin-top: 20px">
                  黄色限制区域
                </div>
                <el-input
                  v-model="huaiHeYellowRestrictedArea"
                  style="width: 90%; margin: auto"
                  :rows="6"
                  type="textarea"
                  placeholder="请输入"
                />
                <div class="dialogText1">红色限制区域</div>
                <el-input
                  v-model="huaiHeRedRestrictedArea"
                  style="width: 90%; margin: auto"
                  :rows="6"
                  type="textarea"
                  placeholder="请输入"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="manyInput" v-show="isActive === 6">
          <!-- 这里是同步作业风险 -->
          <div class="dialogText" style="margin-top: 10px">6.JPO报告</div>
          <div
            class="centerInput1"
            style="padding-bottom: 20px"
            v-show="chooseShipName == '海港未来'"
          >
            <div class="centerNamePut">
              <div class="inputInner" style="margin-left: 50px">
                <div class="name1" @click="clickUpLoad(6)">上传JPO报告</div>
                <div
                  class="name1"
                  @click="
                    seePic(
                      this.$base +
                        '/download/shipType/' +
                        this.haiGangJpoReportImg,
                      this.haiGangJpoReportImg
                    )
                  "
                >
                  查看JPO报告
                </div>
              </div>
            </div>
          </div>

          <!-- 淮河能源  -->
          <div
            class="centerInput1"
            style="padding-bottom: 20px"
            v-show="chooseShipName == '淮河启航'"
          >
            <div class="centerNamePut">
              <div class="inputInner" style="margin-left: 50px">
                <div class="name1" @click="clickUpLoad(7)">上传JPO报告</div>
                <div
                  class="name1"
                  @click="
                    seePic(
                      this.$base +
                        '/download/shipType/' +
                        this.huaiHeJpoReportImg,
                      this.huaiHeJpoReportImg
                    )
                  "
                >
                  查看JPO报告
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="manyInput">
          <div
            class="SpliceButton"
            v-show="
              addOrEdit == '新增' ||
              (this.addOrEdit == '编辑' && this.ifClickOne == false)
            "
          >
            <div
              class="spliceButtonText"
              :class="{ spliceButtonTextActive: isActive }"
              @click="changeChoose($event)"
            >
              海港未来
            </div>
            <div
              class="spliceButtonText"
              :class="{ spliceButtonTextActive: !isActive }"
              @click="changeChoose($event)"
              style="margin-left: 10px"
            >
              淮河新能源启航
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <!-- accept=".xls,.xlsx" -->
    <div class="dialog2" :style="{ display: uploadfile }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile"
          @change="getFile($event)"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile()">
          确定
        </button>
      </div>
    </div>
    <div class="dialog3" :style="{ display: uploadfile1 }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile addfile1"
          @change="getFile1($event)"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp1()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile1()">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import _ from "lodash";
import getOnlyOne from "@/api/paiXu";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import axios from "axios";

export default {
  name: "",
  data() {
    return {
      compare: {},
      deleteNewAddNumber: 1,
      filledShipListSave: [],
      nitrogenPipeTypeAll: [],
      shose_connection_formAll: [],
      fillingStationAll: [],
      bumpHeightAll: [],
      positionAll: [],
      cargoTankTypeAll: [],
      berthingMethodAll: [],
      shipTypeAll: [],

      removeFilledShipIdList: [],
      haiGangPic: "",
      huaihePic: "",
      zhiyuanPic: "",
      chooseShipName: "海港未来",

      role: null,
      image: "",
      fillingPosition: "",
      ifClickOne: false,
      huaiHeFilledShipModels: [],
      haiGangFenderPosition: [],
      haiGangFillPosition: [],
      haiGangNitrogenTubeMatching: [],
      haiGangFilledShipModels: [],
      fillshipCountNumber: 0,
      shipTypeList: [],
      isActive: 1,
      uploadfile1: "none",
      serchNum: null,
      shipPageNumer: 1,
      multi: [],
      locale: zhCn,
      totalNumber: 0,
      tableData: [],
      filledShipList: [],
      searchText: "",
      tableWidth: null,
      page: 1,
      size: 20,
      uploadfile2: "none",
      show: "none",
      addOrEdit: "新增",
      currentNum: 0,
      serialNumber: "",
      shipWidth: "",
      remark: "",
      shipLength: "",
      shareShipType: [],
      shipCompany: "",
      shipNum: "",
      shipType: "",
      shipTypeNum: "",
      depthMoulded: "",
      summerMaximumDraft: "",
      cargoTankType: "",
      cargoTankCapacity: "",
      haiGangFillStationPosition: [],
      huaiHeCompatibilityCompatible: "",
      bumpHeight: "",
      huaiHeMoorCompatible: "",
      huaiHeResearchTeam: "",
      huaiHeCompletionTime: "",
      huaiHeStsReportNumber: "",
      haiGangReportNumber: "",
      haiGangMoorCompatible: "",
      haiGangResearchTeam: "",
      haiGangCompletionTime: "",
      haiGangRiskCompatible: "",
      haiGangRiskResearchTeam: "",
      haiGangRiskCompletionTime: "",
      haiGangJpoReportNumber: "",
      huaiHeRiskCompatible: "",
      haiGangCompatibilityCompatible: "",
      huaiHeRiskResearchTeam: "",
      huaiHeStsReportNumber: "",
      // 海港未来系泊图
      haiGangMoorImg: "",
      // 淮河能源
      huaiHeMoorImg: "",
      // 海港未来限制区域图
      haiGangRestrictedAreaImg: "",
      // 淮河能源限制区域图
      huaiHeRestrictedAreaImg: "",
      // 海港未来sts
      haiGangReportImg: "",
      // 淮河能源sts
      huaiHeStsReportImg: "",
      //海港未来JPO
      haiGangJpoReportImg: "",
      //淮河能源JPO
      huaiHeJpoReportImg: "",
      huaiHeEscapismReport: "",
      haiGangEscapismReport: "",
      haiGangRedRestrictedArea: "",
      haiGangYellowRestrictedArea: "",
      huaiHeYellowRestrictedArea: "",
      huaiHeRedRestrictedArea: "",
      show1: "none",
      color: "#EBEBEB",
      color1: "#EBEBEB",
      file: null,
      fileName: "",
      jtData: null,
      token: "",
      haiGangExcelJson: {
        C2: "",
        C3: "",
        C4: "",
        C5: "",
        C6: "",
        C7: "",
        E2: "",
        E3: "",
        E4: "",
        E5: "",
        E6: "",
        E7: "",
        F2: "",
        F5: "",
      },
      huaiHeExcelJson: {
        C2: "",
        C3: "",
        C4: "",
        C5: "",
        C6: "",
        C7: "",
        E2: "",
        E3: "",
        E4: "",
        E5: "",
        E6: "",
        E7: "",
        F2: "",
        F5: "",
      },
      id: null,
      totalPages: null,
      uploadfile: true,
      addFileFlag: null,
      src1: "",
      src2: "",
      src3: "",
      src4: "",
      huaiHeFenderPosition: [],
      huaiHeFillStationPosition: [],
      huaiHeNitrogenTubeMatching: [],
      huaiHeFillPosition: [],
      berthingMethod: "",
      data: {
        fillingPosition: "",
        removeFilledShipIdList: [],
        bumpHeight: "",
        berthingMethod: "",
        filledShipList: [],
        huaiHeFillPosition: [],
        huaiHeNitrogenTubeMatching: [],
        huaiHeFillStationPosition: [],
        huaiHeFilledShipModels: [],
        huaiHeFenderPosition: [],
        haiGangFenderPosition: ["", ""],
        haiGangFillPosition: [],
        haiGangNitrogenTubeMatching: [],
        haiGangRedRestrictedArea: "",
        haiGangYellowRestrictedArea: "",
        haiGangReportImg: "",
        huaiHeStsReportNumber: "",
        // 淮河能源sts
        huaiHeStsReportImg: "",
        haiGangMoorImg: "",
        huaiHeMoorImg: "",
        huaiHeRiskResearchTeam: "",
        haiGangJpoReportImg: "",
        //淮河能源JPO
        huaiHeJpoReportImg: "",
        huaiHeEscapismReport: "",
        haiGangEscapismReport: "",
        haiGangCompatibilityCompatible: "",
        depthMoulded: "",
        shipWidth: "",
        summerMaximumDraft: "",
        cargoTankType: "",
        shipLength: "",
        shareShipType: [],
        shipCompany: "",
        shipType: "",
        shipTypeNum: "",
        cargoTankCapacity: "",
        haiGangCompatibilityCompatible: "",
        huaiHeCompatibilityCompatible: "",
        huaiHeMoorCompatible: "",
        huaiHeResearchTeam: "",
        huaiHeCompletionTime: "",
        huaiHeStsReportNumber: "",
        haiGangReportNumber: "",
        haiGangMoorCompatible: "",
        haiGangResearchTeam: "",
        haiGangCompletionTime: "",
        haiGangRiskCompatible: "",
        haiGangRiskResearchTeam: "",
        haiGangRiskCompletionTime: "",
        haiGangJpoReportNumber: "",
        huaiHeRiskCompatible: "",
        huaiHeRiskResearchTeam: "",
        huaiHeYellowRestrictedArea: "",
        huaiHeRedRestrictedArea: "",

        liquid_connection_form: "",
        gas_connection_form: "",
        maxFillingRate: "",
        fillingStation: [],
        nitrogenPipeType: "",
        haiGangFillStationPosition: [],
        haiGangFilledShipModels: [],

        type: 0,
        haiGangExcelJson: {
          C2: "",
          C3: "",
          C4: "",
          C5: "",
          C6: "",
          C7: "",
          E2: "",
          E3: "",
          E4: "",
          E5: "",
          E6: "",
          E7: "",
          F2: "",
          F5: "",
        },
        huaiHeExcelJson: {
          C2: "",
          C3: "",
          C4: "",
          C5: "",
          C6: "",
          C7: "",
          E2: "",
          E3: "",
          E4: "",
          E5: "",
          E6: "",
          E7: "",
          F2: "",
          F5: "",
        },
        id: "",
      },
      searchText1: "",
      liquid_connection_form: "",
      gas_connection_form: "",
      maxFillingRate: "",
      fillingStation: [],
      nitrogenPipeType: "",
      haiGangFillStationPosition: [],
      haiGangFilledShipModels: [],
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},

  methods: {
    findFillShipList() {
      this.filledShipList = [];
      for (let i = 0; i < this.filledShipListSave.length; i++) {
        if (this.filledShipListSave[i].englishName.includes(this.searchText1)) {
          this.filledShipList.push(this.filledShipListSave[i]);
        }
      } //
    },
    addOneObject() {
      if (this.addOrEdit == "新增") {
        this.filledShipListSave.push({
          addedShips: "",
          chineseName: "",
          englishName: "",
          imo: "",
          remark: "",
          deleteNewAddNumber: this.deleteNewAddNumber++,
          type: 0,
        });

        this.filledShipList = this.filledShipListSave;
      } else if (this.addOrEdit == "编辑") {
        this.filledShipListSave.push({
          addedShips: "",
          chineseName: "",
          englishName: "",
          imo: "",
          remark: "",
          type: 0,
          shipTypeId: this.id,
          deleteNewAddNumber: this.deleteNewAddNumber++,
        });
        this.filledShipList = this.filledShipListSave;
        this.searchText1 = "";
      }
    },
    deleteOneObj(index, row) {
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            if (this.searchText1) {
              let delete1 = null;
              let delete2 = null;
              if (row.id) {
                for (let i = 0; i < this.filledShipListSave.length; i++) {
                  if (this.filledShipListSave[i].id == row.id) {
                    delete1 = i;
                    this.filledShipListSave.splice(delete1, 1);
                    this.removeFilledShipIdList.push(row.id);
                  }
                }
                for (let i = 0; i < this.filledShipList.length; i++) {
                  if (this.filledShipList[i].id == row.id) {
                    delete2 = i;
                    this.filledShipList.splice(delete2, 1);
                  }
                }
              } else if (row.deleteNewAddNumber) {
                for (let i = 0; i < this.filledShipListSave.length; i++) {
                  if (
                    this.filledShipListSave[i].deleteNewAddNumber ==
                    row.deleteNewAddNumber
                  ) {
                    delete1 = i;
                    this.filledShipListSave.splice(delete1, 1);
                  }
                }
                for (let i = 0; i < this.filledShipList.length; i++) {
                  if (
                    this.filledShipList[i].deleteNewAddNumber ==
                    row.deleteNewAddNumber
                  ) {
                    delete2 = i;
                    this.filledShipList.splice(delete2, 1);
                  }
                }
              }
            } else {
              if (this.filledShipListSave[index].id) {
                this.removeFilledShipIdList.push(
                  this.filledShipListSave[index].id
                );
                this.filledShipListSave.splice(index, 1);
                this.filledShipList = this.filledShipListSave;
              } else {
                this.filledShipListSave.splice(index, 1);
                this.filledShipList = this.filledShipListSave;
              }
            }

            // if (this.searchText1) {
            //   let deleteID = filledShipListSave[index].id;
            //   // for (let i = 0; i < this.filledShipListSave.length; i++) {
            //   //   if (this.filledShipListSave[i].id == deleteID) {
            //   //   }
            //   // }
            // }
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    async getShipTypeAll() {
      let data = {
        dicTypeTypeId: 16,
      };
      await service({
        methods: "get",
        url: "/dict-item/find-all",
        params: data,
      })
        .then((e) => {
          this.shipTypeAll = e.data;
        })
        .catch((err) => {});
    },
    async getberthingMethod() {
      let data = {
        dicTypeTypeId: 20,
      };
      await service({
        methods: "get",
        url: "/dict-item/find-all",
        params: data,
      })
        .then((e) => {
          this.berthingMethodAll = e.data;
        })
        .catch((err) => {});
    },
    async getcargoTankType() {
      let data = {
        dicTypeTypeId: 18,
      };
      await service({
        methods: "get",
        url: "/dict-item/find-all",
        params: data,
      })
        .then((e) => {
          this.cargoTankTypeAll = e.data;
        })
        .catch((err) => {});
    },
    async getShipPictrue() {
      let data = {
        page: this.page,
        size: this.size,
        dicTypeTypeId: 1,
      };

      await service({
        methods: "get",
        url: "/dict-item/find-one-page",
        params: data,
      })
        .then((e) => {
          this.haiGangPic = e.data.content[0].image;
          this.huaihePic = e.data.content[2].image;
          this.zhiyuanPic = e.data.content[1].image;
        })
        .catch((err) => {});
    },
    changeChooseTable(num) {
      this.isActive = num;
    },
    clickWhich(which, num, id) {
      this.ifClickOne = true;
      if (which == 1) {
        this.clickEdit(id);
        this.addOrEdit = "编辑";
        this.isActive = num;
        this.chooseShipName = "海港未来";
      } else if (which == 2) {
        this.clickEdit(id);
        this.addOrEdit = "编辑";
        this.isActive = num;
        this.chooseShipName = "淮河启航";
      }
    },
    findALl() {
      service({
        method: "get",
        url: "filled-ship-list/find-all",
      }).then((e) => {});
    },

    getShipTypeList(a) {
      let html = ``;
      try {
        if (JSON.parse(a).length >= 0) {
          let list = JSON.parse(a);
          if (list) {
            list.forEach((item) => {
              html += `<div>${item}</div>`;
            });
          }
        }
      } catch (error) {
        if (a) {
          html += `<div></div>`;
        }
      }
      return html;
    },
    getShipName(a) {
      let html = ``;
      try {
        if (a.length > 0) {
          // let list = JSON.parse(a);

          a.forEach((item) => {
            html += `<div>${item.englishName}</div>`;
          });
        }
      } catch (error) {
        if (a) {
          html += `<div></div>`;
        }
      }
      return html;
    },
    changeChoose(event) {
      if (event.target.innerHTML.includes("海港未来") == 1 && !this.isActive) {
        this.isActive = !this.isActive;
      } else if (
        event.target.innerHTML.includes("淮河新能源启航") == 1 &&
        this.isActive
      ) {
        this.isActive = !this.isActive;
      }
    },
    handleMouseOver(a) {
      try {
        a.target.children[0].style.display = "block";
      } catch (error) {}
    },
    handleMouseLeave(a) {
      try {
        a.target.children[0].style.display = "none";
      } catch (error) {}
    },
    showPromise(a) {
      let params = new URLSearchParams();
      params.append("id", a);
      this.$alert("确定复制选中的信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            axios
              .post(this.$base + "/KM_Platform/ship-type/copy", params, {
                headers: {
                  token: this.token,
                  "Content-Type": "application/x-www-form-urlencoded", // 设置请求头
                },
              })
              .then((e) => {
                if (e.data.status == "SUCCESS") {
                  this.$message({
                    message: "复制成功",
                    type: "success",
                  });
                  if (this.totalNumber % 20 == 0) {
                    this.page = this.totalPages + 1;
                  } else {
                    this.page = this.totalPages;
                  }

                  this.getRenderList();
                } else if (e.data.status == "ERROR") {
                  this.$message({
                    message: e.data.error,
                    type: "warning",
                  });
                }
              })
              .catch((e) => {});
          } else {
            this.$message({
              type: "info",
              message: "取消复制",
            });
          }
        },
      });
    },
    seePic(a, b) {
      if (a && b) {
        const link = document.createElement("a");
        // link.download = "image.png";
        link.href = a + "?" + new Date().getTime();
        link.target = "blank";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        return this.$message({
          message: "不存在相关文件",
          type: "warning",
        });
      }
    },
    clickUpLoad(a) {
      this.uploadfile = "block";
      this.addFileFlag = a;
    },

    // 跳转页面
    skipPage() {
      if (this.shipPageNumer <= this.totalPages && this.shipPageNumer > 0) {
        this.page = this.shipPageNumer;
        this.getRenderList();
      } else {
        this.$message({
          type: "warning",
          message: "超出页面数量范围",
        });
      }
    },

    // 导入文件================
    uploadFile() {
      this.uploadfile = "block";
    },
    uploadFile1() {
      this.uploadfile1 = "block";
    },
    uploadFile2() {
      this.uploadfile2 = "block";
    },
    getFile1(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
      document.getElementsByClassName("addfile1")[0].value = "";
    },

    cancelUp1() {
      this.file = "";
      this.fileName = "";
      this.uploadfile1 = "none";
      document.getElementsByClassName("addfile1")[0].value = "";
    },

    getFile(event) {
      this.file = event.target.files[0];
      if (
        this.addFileFlag == 0 ||
        this.addFileFlag == 1 ||
        this.addFileFlag == 2 ||
        this.addFileFlag == 3
      ) {
        if (this.file.type == "image/png" || this.file.type == "image/jpeg") {
          this.fileName = this.file.name;
        } else {
          this.file = "";
          document.getElementsByClassName("addfile")[0].value = "";
          return this.$message({
            message: "只能上传图片",
            type: "warning",
          });
        }
      } else if (
        this.addFileFlag == 4 ||
        this.addFileFlag == 5 ||
        this.addFileFlag == 6 ||
        this.addFileFlag == 7 ||
        this.addFileFlag == 8 ||
        this.addFileFlag == 9
      ) {
        if (this.file.type == "application/pdf") {
          this.fileName = this.file.name;
        } else {
          return this.$message({
            message: "只能上传PDF文件",
            type: "warning",
          });
        }
      } else if (this.addFileFlag == 10) {
        this.fileName = this.file.name;
        if (this.file.type == "image/png" || this.file.type == "image/jpeg") {
        } else {
          this.file = "";
          document.getElementsByClassName("addfile")[0].value = "";
          return this.$message({
            message: "只能上传图片",
            type: "warning",
          });
        }
      }
      document.getElementsByClassName("addfile")[0].value = "";
    },
    submitAddFile() {
      if (this.addFileFlag == 0) {
        if (this.addOrEdit == "新增" || !this.haiGangMoorImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.haiGangMoorImg = res.data;
                this.src1 = this.$base + "/download/shipType/" + res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: "",
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.haiGangMoorImg = res.data;

              this.src1 =
                this.$base +
                "/download/shipType/" +
                res.data +
                "?" +
                new Date().getTime();
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 1) {
        if (this.addOrEdit == "新增" || !this.huaiHeMoorImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.huaiHeMoorImg = res.data;

                this.src2 = this.$base + "/download/shipType/" + res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: "",
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.huaiHeMoorImg = res.data;

              this.src2 =
                this.$base +
                "/download/shipType/" +
                res.data +
                "?" +
                new Date().getTime();
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 2) {
        if (this.addOrEdit == "新增" || !this.haiGangRestrictedAreaImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.haiGangRestrictedAreaImg = res.data;
                this.src3 = this.$base + "/download/shipType/" + res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: "",
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.haiGangRestrictedAreaImg = res.data;
              this.src3 =
                this.$base +
                "/download/shipType/" +
                res.data +
                "?" +
                new Date().getTime();
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 3) {
        if (this.addOrEdit == "新增" || !this.huaiHeRestrictedAreaImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.huaiHeRestrictedAreaImg = res.data;

                this.src4 =
                  this.$base +
                  "/download/shipType/" +
                  res.data +
                  "?" +
                  new Date().getTime();
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: "",
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.huaiHeRestrictedAreaImg = res.data;

              this.src4 =
                this.$base +
                "/download/shipType/" +
                res.data +
                "?" +
                new Date().getTime();
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 4) {
        if (this.addOrEdit == "新增" || !this.haiGangReportImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.haiGangReportImg = res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: "",
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.haiGangReportImg = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 5) {
        if (this.addOrEdit == "新增" || !this.huaiHeStsReportImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.huaiHeStsReportImg = res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: "",
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.huaiHeStsReportImg = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 6) {
        if (this.addOrEdit == "新增" || !this.haiGangJpoReportImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.haiGangJpoReportImg = res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: "",
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.haiGangJpoReportImg = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 7) {
        if (this.addOrEdit == "新增" || !this.huaiHeJpoReportImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.huaiHeJpoReportImg = res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: "",
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.huaiHeJpoReportImg = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 8) {
        if (this.addOrEdit == "新增" || !this.haiGangEscapismReport) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.haiGangEscapismReport = res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: "",
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.haiGangEscapismReport = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 9) {
        if (this.addOrEdit == "新增" || !this.huaiHeEscapismReport) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.huaiHeEscapismReport = res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: "",
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.huaiHeEscapismReport = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 10) {
        const file = this.file;
        if (!file) return;
        if (file.size > 1000000) {
          this.file = "";
          // this.uploadfile = "none";
          this.fileName = "";

          document.getElementsByClassName("addfile")[0].value = "";
          return this.$message({
            message: "图片文件不能超过1M",
            type: "warning",
          });
        }

        const reader = new FileReader();
        reader.onload = (event) => {
          const base64String = event.target.result;
          const pureBase64 = base64String.split(",")[1];
          this.image = pureBase64;
        };
        reader.readAsDataURL(file);
        this.uploadfile = "none";
      }

      this.getRenderList();
      this.fileName = "";
      document.getElementsByClassName("addfile")[0].value = "";
    },
    imageSrc(src) {
      if (src) {
        return `data:mage/png;base64,${src}`;
      } else return "";
    },
    indexNumber(index) {
      return (this.page - 1) * this.size + index + 1;
    },
    handleRowDblclick(row) {
      this.ifClickOne = false;
      this.clickEdit(row.id);
    },
    // 批量删除开始========================
    selecttableFunction(row) {
      if (row.length > 0) {
        this.multi = [];
        row.forEach((element) => {
          this.multi.push(element.id);
        });
      } else {
        this.multi = [];
      }
    },
    deleteMulti() {
      // let that = this;
      if (this.multi.length == 0) {
        return this.$message({
          type: "warning",
          message: "请先选中再进行批量删除操作！",
        });
      }
      let data = {
        idList: this.multi + "",
      };

      this.$alert("确定删除选中的信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/ship-type`,
              params: data,
            }).then((r) => {
              if (r.status == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                if (this.currentNum == this.multi.length && this.page > 1) {
                  this.page--;
                }
                this.getRenderList();
              }
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    //批量删除结束=============================

    customIndex(index) {
      return (this.page - 1) * this.size + index + 1;
      // 自定义序号显示，比如增加分页后的偏移量
      // return (this.page - 1) * this.size + index + 1;
    },
    cancelUp() {
      this.file = "";
      this.fileName = "";
      this.uploadfile = "none";
      document.getElementsByClassName("addfile")[0].value = "";
    },
    // 导入文件结束=============
    backToIndex() {
      if (this.addOrEdit == "编辑") {
        let data = {
          berthingMethod: this.berthingMethod,
          huaiHeNitrogenTubeMatching: this.huaiHeNitrogenTubeMatching,
          fillingPosition: this.fillingPosition,
          bumpHeight: this.bumpHeight,
          huaiHeFillStationPosition: this.huaiHeFillStationPosition,
          huaiHeFillPosition: this.huaiHeFillPosition,
          huaiHeFilledShipModels: this.huaiHeFilledShipModels,
          huaiHeFenderPosition: this.huaiHeFenderPosition,
          haiGangFenderPosition: this.haiGangFenderPosition,
          haiGangFillPosition: this.haiGangFillPosition,
          haiGangNitrogenTubeMatching: this.haiGangNitrogenTubeMatching,
          haiGangFillStationPosition: this.haiGangFillStationPosition,
          haiGangFilledShipModels: this.haiGangFilledShipModels,
          haiGangExcelJson: this.haiGangExcelJson,
          huaiHeExcelJson: this.huaiHeExcelJson,
          huaiHeStsReportNumber: this.huaiHeStsReportNumber,
          haiGangRedRestrictedArea: this.haiGangRedRestrictedArea,
          haiGangYellowRestrictedArea: this.haiGangYellowRestrictedArea,
          huaiHeYellowRestrictedArea: this.huaiHeYellowRestrictedArea,
          huaiHeRedRestrictedArea: this.huaiHeRedRestrictedArea,
          filledShipList: this.filledShipListSave,
          image: this.image,
          haiGangRestrictedAreaImg: this.haiGangRestrictedAreaImg,
          huaiHeRestrictedAreaImg: this.huaiHeRestrictedAreaImg,
          haiGangMoorImg: this.haiGangMoorImg,
          huaiHeMoorImg: this.huaiHeMoorImg,
          shipWidth: this.shipWidth,
          shipLength: this.shipLength,
          huaiHeJpoReportImg: this.huaiHeJpoReportImg,
          huaiHeEscapismReport: this.huaiHeEscapismReport,
          haiGangEscapismReport: this.haiGangEscapismReport,
          haiGangReportImg: this.haiGangReportImg,
          huaiHeStsReportImg: this.huaiHeStsReportImg,
          haiGangJpoReportImg: this.haiGangJpoReportImg,
          shareShipType: this.shareShipType,
          shipCompany: this.shipCompany,
          shipType: this.shipType,
          shipTypeNum: this.shipTypeNum,
          depthMoulded: this.depthMoulded,
          summerMaximumDraft: this.summerMaximumDraft,
          cargoTankType: this.cargoTankType,
          cargoTankCapacity: this.cargoTankCapacity,
          huaiHeCompatibilityCompatible: this.huaiHeCompatibilityCompatible,
          huaiHeMoorCompatible: this.huaiHeMoorCompatible,
          liquid_connection_form: this.liquid_connection_form,
          gas_connection_form: this.gas_connection_form,
          maxFillingRate: this.maxFillingRate,
          fillingStation: this.fillingStation,
          nitrogenPipeType: this.nitrogenPipeType,
          huaiHeResearchTeam: this.huaiHeResearchTeam,
          huaiHeCompletionTime: this.huaiHeCompletionTime,
          huaiHeStsReportNumber: this.huaiHeStsReportNumber,
          haiGangReportNumber: this.haiGangReportNumber,
          haiGangMoorCompatible: this.haiGangMoorCompatible,
          haiGangResearchTeam: this.haiGangResearchTeam,
          haiGangCompletionTime: this.haiGangCompletionTime,
          haiGangRiskCompatible: this.haiGangRiskCompatible,
          haiGangRiskResearchTeam: this.haiGangRiskResearchTeam,
          haiGangRiskCompletionTime: this.haiGangRiskCompletionTime,
          haiGangJpoReportNumber: this.haiGangJpoReportNumber,
          huaiHeRiskCompatible: this.huaiHeRiskCompatible,
          haiGangCompatibilityCompatible: this.haiGangCompatibilityCompatible,
          huaiHeRiskResearchTeam: this.huaiHeRiskResearchTeam,
        };
        let equal = _.isEqual(data, JSON.parse(this.compare));

        // 输出示例：
        // [{
        //   kind: 'E',
        //   path: ['b', 'c'],
        //   lhs: 2,
        //   rhs: 3
        // }]

        if (equal) {
          this.close();
        } else {
          this.$confirm("数据信息有变化是否保存再离开？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            // type: "warning",
          })
            .then(() => {
              this.sureAdd();
            })
            .catch(() => {
              this.close();
            });
        }
      } else if (this.addOrEdit == "新增") {
        this.close();
      }
    },

    getOneDetail(id) {
      getOnlyOne(id).then((e) => {
        let item = e.data;
        this.id = id;
        this.berthingMethod = item.berthingMethod;
        if (item.huaiHeNitrogenTubeMatching) {
          this.huaiHeNitrogenTubeMatching = JSON.parse(
            item.huaiHeNitrogenTubeMatching
          );
        } else {
          this.huaiHeNitrogenTubeMatching = [];
        }
        this.fillingPosition = item.fillingPosition;
        this.bumpHeight = item.bumpHeight;
        if (item.huaiHeFillStationPosition) {
          this.huaiHeFillStationPosition = JSON.parse(
            item.huaiHeFillStationPosition
          );
        } else {
          this.huaiHeFillStationPosition = [];
        }

        try {
          if (JSON.parse(item.huaiHeFillPosition).length > 0) {
            this.huaiHeFillPosition = JSON.parse(item.huaiHeFillPosition);
          }
        } catch (error) {
          this.huaiHeFillPosition = ["", ""];
        }
        if (item.huaiHeFilledShipModels) {
          this.huaiHeFilledShipModels = JSON.parse(item.huaiHeFilledShipModels);
        } else {
          this.huaiHeFilledShipModels = [];
        }
        if (item.huaiHeFenderPosition) {
          this.huaiHeFenderPosition = JSON.parse(item.huaiHeFenderPosition);
        } else {
          this.huaiHeFenderPosition = [];
        }
        try {
          if (JSON.parse(item.haiGangFenderPosition).length > 0) {
            this.haiGangFenderPosition = JSON.parse(item.haiGangFenderPosition);
          }
        } catch (error) {
          this.haiGangFenderPosition = ["", ""];
        }
        if (item.haiGangFillPosition) {
          this.haiGangFillPosition = JSON.parse(item.haiGangFillPosition);
        } else {
          this.haiGangFillPosition = [];
        }
        if (item.haiGangFillPosition) {
          this.haiGangFillPosition = JSON.parse(item.haiGangFillPosition);
        } else {
          this.haiGangFillPosition = [];
        }
        if (item.haiGangNitrogenTubeMatching) {
          this.haiGangNitrogenTubeMatching = JSON.parse(
            item.haiGangNitrogenTubeMatching
          );
        } else {
          this.haiGangNitrogenTubeMatching = [];
        }
        if (item.haiGangFillStationPosition) {
          this.haiGangFillStationPosition = JSON.parse(
            item.haiGangFillStationPosition
          );
        } else {
          this.haiGangFillStationPosition = [];
        }
        if (item.haiGangFilledShipModels) {
          this.haiGangFilledShipModels = JSON.parse(
            item.haiGangFilledShipModels
          );
        } else {
          this.haiGangFilledShipModels = [];
        }
        if (item.haiGangExcelJson) {
          this.haiGangExcelJson = JSON.parse(item.haiGangExcelJson);
        }
        if (item.huaiHeExcelJson) {
          this.huaiHeExcelJson = JSON.parse(item.huaiHeExcelJson);
        }
        this.huaiHeStsReportNumber = item.huaiHeStsReportNumber;
        this.haiGangRedRestrictedArea = item.haiGangRedRestrictedArea;
        this.haiGangYellowRestrictedArea = item.haiGangYellowRestrictedArea;
        this.huaiHeYellowRestrictedArea = item.huaiHeYellowRestrictedArea;
        this.huaiHeRedRestrictedArea = item.huaiHeRedRestrictedArea;
        this.filledShipList = item.filledShipList;
        this.filledShipListSave = item.filledShipList;

        this.image = item.image;
        this.haiGangRestrictedAreaImg = item.haiGangRestrictedAreaImg;
        // 淮河能源限制区域图
        this.huaiHeRestrictedAreaImg = item.huaiHeRestrictedAreaImg;
        this.haiGangMoorImg = item.haiGangMoorImg;
        this.huaiHeMoorImg = item.huaiHeMoorImg;
        this.shipWidth = item.shipWidth;
        this.shipLength = item.shipLength;
        this.huaiHeJpoReportImg = item.huaiHeJpoReportImg;
        this.huaiHeEscapismReport = item.huaiHeEscapismReport;
        this.haiGangEscapismReport = item.haiGangEscapismReport;
        this.haiGangReportImg = item.haiGangReportImg;
        this.huaiHeStsReportImg = item.huaiHeStsReportImg;
        this.haiGangJpoReportImg = item.haiGangJpoReportImg;
        try {
          if (item.shareShipType == "null") {
            this.shareShipType = [];
          } else if (JSON.parse(item.shareShipType).length > 0) {
            this.shareShipType = JSON.parse(item.shareShipType);
          }
        } catch (error) {
          if (item.shareShipType) {
            this.shareShipType = [];
            this.shareShipType.push(item.shareShipType);
          } else {
            this.shareShipType = [];
          }
        }
        this.shipCompany = item.shipCompany;
        this.shipType = item.shipType;
        this.shipTypeNum = item.shipTypeNum;
        this.depthMoulded = item.depthMoulded;
        this.summerMaximumDraft = item.summerMaximumDraft;
        this.cargoTankType = item.cargoTankType;
        this.cargoTankCapacity = item.cargoTankCapacity;
        this.huaiHeCompatibilityCompatible = item.huaiHeCompatibilityCompatible;
        this.huaiHeMoorCompatible = item.huaiHeMoorCompatible;
        try {
          if (
            item.liquid_connection_form &&
            JSON.parse(item.liquid_connection_form).length > 0
          ) {
            this.liquid_connection_form = JSON.parse(
              item.liquid_connection_form
            );
          }
        } catch (error) {
          this.liquid_connection_form = [];
        }
        try {
          if (
            item.gas_connection_form &&
            JSON.parse(item.gas_connection_form).length > 0
          ) {
            this.gas_connection_form = JSON.parse(item.gas_connection_form);
          }
        } catch (error) {
          this.gas_connection_form = [];
        }

        try {
          if (
            item.fillingStation &&
            JSON.parse(item.fillingStation).length > 0
          ) {
            this.fillingStation = JSON.parse(item.fillingStation);
          }
        } catch (error) {
          this.fillingStation = [];
        }
        this.maxFillingRate = item.maxFillingRate;

        this.nitrogenPipeType = item.nitrogenPipeType;
        this.huaiHeResearchTeam = item.huaiHeResearchTeam;
        this.huaiHeCompletionTime = item.huaiHeCompletionTime;
        this.huaiHeStsReportNumber = item.huaiHeStsReportNumber;
        this.haiGangReportNumber = item.haiGangReportNumber;
        this.haiGangMoorCompatible = item.haiGangMoorCompatible;
        this.haiGangResearchTeam = item.haiGangResearchTeam;
        this.haiGangCompletionTime = item.haiGangCompletionTime;
        this.haiGangRiskCompatible = item.haiGangRiskCompatible;
        this.haiGangRiskResearchTeam = item.haiGangRiskResearchTeam;
        this.haiGangRiskCompletionTime = item.haiGangRiskCompletionTime;
        this.haiGangJpoReportNumber = item.haiGangJpoReportNumber;
        this.huaiHeRiskCompatible = item.huaiHeRiskCompatible;
        this.haiGangCompatibilityCompatible =
          item.haiGangCompatibilityCompatible;
        this.huaiHeRiskResearchTeam = item.huaiHeRiskResearchTeam;
        this.src1 =
          this.$base +
          "/download/shipType/" +
          item.haiGangMoorImg +
          "?" +
          new Date().getTime();
        this.src2 =
          this.$base +
          "/download/shipType/" +
          item.huaiHeMoorImg +
          "?" +
          new Date().getTime();
        this.src3 =
          this.$base +
          "/download/shipType/" +
          item.haiGangRestrictedAreaImg +
          "?" +
          new Date().getTime();
        this.src4 =
          this.$base +
          "/download/shipType/" +
          item.huaiHeRestrictedAreaImg +
          "?" +
          new Date().getTime();
        this.show = "block";
        this.compare = JSON.stringify({
          berthingMethod: this.berthingMethod,
          huaiHeNitrogenTubeMatching: this.huaiHeNitrogenTubeMatching,
          fillingPosition: this.fillingPosition,
          bumpHeight: this.bumpHeight,
          huaiHeFillStationPosition: this.huaiHeFillStationPosition,
          huaiHeFillPosition: this.huaiHeFillPosition,
          huaiHeFilledShipModels: this.huaiHeFilledShipModels,
          huaiHeFenderPosition: this.huaiHeFenderPosition,
          haiGangFenderPosition: this.haiGangFenderPosition,
          haiGangFillPosition: this.haiGangFillPosition,
          haiGangNitrogenTubeMatching: this.haiGangNitrogenTubeMatching,
          haiGangFillStationPosition: this.haiGangFillStationPosition,
          haiGangFilledShipModels: this.haiGangFilledShipModels,
          haiGangExcelJson: this.haiGangExcelJson,
          huaiHeExcelJson: this.huaiHeExcelJson,
          huaiHeStsReportNumber: this.huaiHeStsReportNumber,
          haiGangRedRestrictedArea: this.haiGangRedRestrictedArea,
          haiGangYellowRestrictedArea: this.haiGangYellowRestrictedArea,
          huaiHeYellowRestrictedArea: this.huaiHeYellowRestrictedArea,
          huaiHeRedRestrictedArea: this.huaiHeRedRestrictedArea,
          filledShipList: this.filledShipList,
          image: this.image,
          haiGangRestrictedAreaImg: this.haiGangRestrictedAreaImg,
          huaiHeRestrictedAreaImg: this.huaiHeRestrictedAreaImg,
          haiGangMoorImg: this.haiGangMoorImg,
          huaiHeMoorImg: this.huaiHeMoorImg,
          shipWidth: this.shipWidth,
          shipLength: this.shipLength,
          huaiHeJpoReportImg: this.huaiHeJpoReportImg,
          huaiHeEscapismReport: this.huaiHeEscapismReport,
          haiGangEscapismReport: this.haiGangEscapismReport,
          haiGangReportImg: this.haiGangReportImg,
          huaiHeStsReportImg: this.huaiHeStsReportImg,
          haiGangJpoReportImg: this.haiGangJpoReportImg,
          shareShipType: this.shareShipType,
          shipCompany: this.shipCompany,
          shipType: this.shipType,
          shipTypeNum: this.shipTypeNum,
          depthMoulded: this.depthMoulded,
          summerMaximumDraft: this.summerMaximumDraft,
          cargoTankType: this.cargoTankType,
          cargoTankCapacity: this.cargoTankCapacity,
          huaiHeCompatibilityCompatible: this.huaiHeCompatibilityCompatible,
          huaiHeMoorCompatible: this.huaiHeMoorCompatible,
          liquid_connection_form: this.liquid_connection_form,
          gas_connection_form: this.gas_connection_form,
          maxFillingRate: this.maxFillingRate,
          fillingStation: this.fillingStation,
          nitrogenPipeType: this.nitrogenPipeType,
          huaiHeResearchTeam: this.huaiHeResearchTeam,
          huaiHeCompletionTime: this.huaiHeCompletionTime,
          huaiHeStsReportNumber: this.huaiHeStsReportNumber,
          haiGangReportNumber: this.haiGangReportNumber,
          haiGangMoorCompatible: this.haiGangMoorCompatible,
          haiGangResearchTeam: this.haiGangResearchTeam,
          haiGangCompletionTime: this.haiGangCompletionTime,
          haiGangRiskCompatible: this.haiGangRiskCompatible,
          haiGangRiskResearchTeam: this.haiGangRiskResearchTeam,
          haiGangRiskCompletionTime: this.haiGangRiskCompletionTime,
          haiGangJpoReportNumber: this.haiGangJpoReportNumber,
          huaiHeRiskCompatible: this.huaiHeRiskCompatible,
          haiGangCompatibilityCompatible: this.haiGangCompatibilityCompatible,
          huaiHeRiskResearchTeam: this.huaiHeRiskResearchTeam,
        });
      });
    },

    clickEdit(a) {
      this.addOrEdit = "编辑";
      this.src1 = "";
      this.src2 = "";
      this.src3 = "";
      this.src4 = "";
      this.getOneDetail(a);
    },

    sureAdd() {
      if (!this.shipTypeNum) {
        return this.$message({
          message: "船型编号不能为空！",
          type: "warning",
        });
      }
      this.data.removeFilledShipIdList = this.removeFilledShipIdList;
      this.data.haiGangNitrogenTubeMatching = JSON.stringify(
        this.haiGangNitrogenTubeMatching
      );
      this.data.berthingMethod = this.berthingMethod;
      this.data.bumpHeight = this.bumpHeight;
      this.data.filledShipList = this.filledShipListSave;

      this.data.id = this.id;
      this.data.fillingPosition = this.fillingPosition;
      this.data.image = this.image;

      this.data.huaiHeFillPosition = JSON.stringify(this.huaiHeFillPosition);
      this.data.huaiHeNitrogenTubeMatching = JSON.stringify(
        this.huaiHeNitrogenTubeMatching
      );
      this.data.huaiHeFillStationPosition = JSON.stringify(
        this.huaiHeFillStationPosition
      );
      this.data.huaiHeFilledShipModels = JSON.stringify(
        this.huaiHeFilledShipModels
      );
      this.data.huaiHeFenderPosition = JSON.stringify(
        this.huaiHeFenderPosition
      );
      this.data.haiGangFillPosition = JSON.stringify(this.haiGangFillPosition);
      this.data.haiGangFenderPosition = JSON.stringify(
        this.haiGangFenderPosition
      );

      this.data.huaiHeStsReportNumber = this.huaiHeStsReportNumber;
      this.data.haiGangExcelJson = JSON.stringify(this.haiGangExcelJson);
      this.data.huaiHeExcelJson = JSON.stringify(this.huaiHeExcelJson);
      this.data.haiGangRedRestrictedArea = this.haiGangRedRestrictedArea;
      this.data.haiGangYellowRestrictedArea = this.haiGangYellowRestrictedArea;
      this.data.huaiHeYellowRestrictedArea = this.huaiHeYellowRestrictedArea;
      this.data.huaiHeRedRestrictedArea = this.huaiHeRedRestrictedArea;
      this.data.haiGangJpoReportImg = this.haiGangJpoReportImg;
      //淮河能源JPO
      this.data.huaiHeJpoReportImg = this.huaiHeJpoReportImg;
      this.data.huaiHeEscapismReport = this.huaiHeEscapismReport;
      this.data.haiGangEscapismReport = this.haiGangEscapismReport;
      this.data.haiGangReportImg = this.haiGangReportImg;
      this.data.huaiHeStsReportImg = this.huaiHeStsReportImg;
      this.data.haiGangMoorImg = this.haiGangMoorImg;
      this.data.huaiHeMoorImg = this.huaiHeMoorImg;
      this.data.haiGangRestrictedAreaImg = this.haiGangRestrictedAreaImg;
      this.data.huaiHeRestrictedAreaImg = this.huaiHeRestrictedAreaImg;
      this.data.huaiHeRiskResearchTeam = this.huaiHeRiskResearchTeam;

      this.data.shipWidth = this.shipWidth;
      this.data.shipLength = this.shipLength;
      this.data.shareShipType = JSON.stringify(this.shareShipType);
      this.data.shipCompany = this.shipCompany;
      this.data.shipType = this.shipType;
      this.data.shipTypeNum = this.shipTypeNum;
      this.data.depthMoulded = this.depthMoulded;
      this.data.summerMaximumDraft = this.summerMaximumDraft;
      this.data.cargoTankType = this.cargoTankType;
      this.data.cargoTankCapacity = this.cargoTankCapacity;
      this.data.huaiHeCompatibilityCompatible =
        this.huaiHeCompatibilityCompatible;
      this.data.huaiHeMoorCompatible = this.huaiHeMoorCompatible;
      this.data.huaiHeResearchTeam = this.huaiHeResearchTeam;
      this.data.huaiHeCompletionTime = this.huaiHeCompletionTime;
      this.data.huaiHeStsReportNumber = this.huaiHeStsReportNumber;
      this.data.haiGangReportNumber = this.haiGangReportNumber;
      this.data.haiGangMoorCompatible = this.haiGangMoorCompatible;
      this.data.haiGangResearchTeam = this.haiGangResearchTeam;
      this.data.haiGangCompletionTime = this.haiGangCompletionTime;
      this.data.haiGangRiskCompatible = this.haiGangRiskCompatible;
      this.data.haiGangRiskResearchTeam = this.haiGangRiskResearchTeam;
      this.data.haiGangRiskCompletionTime = this.haiGangRiskCompletionTime;
      this.data.haiGangJpoReportNumber = this.haiGangJpoReportNumber;
      this.data.huaiHeRiskCompatible = this.huaiHeRiskCompatible;
      this.data.haiGangCompatibilityCompatible =
        this.haiGangCompatibilityCompatible;
      this.data.type = 0;
      this.data.liquid_connection_form = JSON.stringify(
        this.liquid_connection_form
      );
      this.data.gas_connection_form = JSON.stringify(this.gas_connection_form);
      this.data.maxFillingRate = this.maxFillingRate;
      this.data.fillingStation = JSON.stringify(this.fillingStation);
      this.data.nitrogenPipeType = this.nitrogenPipeType;
      this.data.haiGangFillStationPosition = JSON.stringify(
        this.haiGangFillStationPosition
      );
      this.data.haiGangFilledShipModels = JSON.stringify(
        this.haiGangFilledShipModels
      );

      // return
      if (this.addOrEdit == "编辑") {
        service({
          method: "put",
          data: this.data,
          url: "/ship-type",
          // headers: {
          //   "Content-Type": "multipart/form-data",
          // },
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "修改成功",
              });
            }
            this.clearCanShu();
            this.getRenderList();
            this.show = "none";
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      } else {
        service({
          method: "post",
          data: this.data,
          url: "/ship-type",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "新增成功",
              });

              this.clearCanShu();
              this.getRenderList();
              this.show = "none";
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      }
    },
    // 删除数据
    deleteOne(a) {
      // let that = this;
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/ship-type/${a}`,
            })
              .then((r) => {
                if (r.status == "SUCCESS") {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  if (this.currentNum == 1 && this.page > 1) {
                    this.page--;
                  }
                  this.getRenderList();
                  this.show = "none";
                }
              })
              .catch((err) => {
                this.$message({
                  type: "warning",
                  message: "出错了！",
                });
              });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    // 弹窗确认按钮
    deleteOne2(a) {
      // let that = this;
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/filled-ship-list/${a}`,
            })
              .then((r) => {
                if (r.status == "SUCCESS") {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  if (this.currentNum == 1 && this.page > 1) {
                    this.page--;
                  }
                  this.getRenderList();
                }
              })
              .catch((err) => {
                this.$message({
                  type: "warning",
                  message: "出错了！",
                });
              });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    reduceDate(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}-${month}-${day}`;
    },
    // 关闭弹窗
    close() {
      this.show = "none";
      this.show1 = "none";
      this.uploadfile = "none";
      this.uploadfile1 = "none";
      this.uploadfile2 = "none";
      this.isActive = 1;
      this.clearCanShu();
      this.getRenderList();
    },
    // 新增
    addOne() {
      this.src1 = "";
      this.src2 = "";
      this.src3 = "";
      this.src4 = "";
      this.clearCanShu();
      let that = this;
      this.addOrEdit = "新增";
      // this.$refs["dialog"].style.display = show;
      this.show = "block";
    },
    // 导出文件
    getFileName() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day =
        date.getDate() > 10 ? date.getDate().toString() : "0" + date.getDate();
      let hour =
        date.getHours() > 10
          ? date.getHours().toString()
          : "0" + date.getHours();
      let min =
        date.getMinutes() > 10
          ? date.getMinutes().toString()
          : "0" + date.getMinutes();
      date = null;
      return `${year}${month}${day}${hour}${min}`;
    },

    // 导出文件
    getFileName() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day =
        date.getDate() > 10 ? date.getDate().toString() : "0" + date.getDate();
      let hour =
        date.getHours() > 10
          ? date.getHours().toString()
          : "0" + date.getHours();
      let min =
        date.getMinutes() > 10
          ? date.getMinutes().toString()
          : "0" + date.getMinutes();
      date = null;
      return `${year}${month}${day}${hour}${min}`;
    },
    async getExcelFile() {
      let that = this;
      let time = this.getFileName();
      this.token = sessionStorage.getItem("token");
      this.token = JSON.parse(this.token);
      axios({
        method: "get",
        url: this.$loadFile + "/fill-data/export",
        responseType: "blob", // 关键：设置响应类型为blob
        data: {
          fileName: "装载作业",
        },
        headers: {
          token: that.token,
        },
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          // 创建一个隐藏的<a>标签，并设置其href属性为上面创建的URL
          const link = document.createElement("a");
          link.href = url;

          link.download = "船型总表-" + time + ".xls"; // 替
          document.body.appendChild(link);

          link.click();

          document.body.removeChild(link);

          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          this.$message({
            message: "文件下载失败",
            type: "info",
          });
        });
    },
    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },
    async getExcelFile1() {
      let that = this;
      let time = this.getFileName();

      this.token = sessionStorage.getItem("token");
      this.token = JSON.parse(this.token);

      axios({
        method: "get",
        url: this.$loadFile + "/ship-type/export",
        responseType: "blob", // 关键：设置响应类型为blob
        params: {
          type: 0,
        },
        headers: {
          token: that.token,
        },
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          // 创建一个隐藏的<a>标签，并设置其href属性为上面创建的URL
          const link = document.createElement("a");
          link.href = url;

          link.download = "LNG船型基本信息-" + time + ".xls"; // 替

          document.body.appendChild(link);

          link.click();

          document.body.removeChild(link);

          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          this.$message({
            message: "文件下载失败",
            type: "info",
          });
        });
    },
    submitAddFile1(a) {
      if (this.file) {
        let data = {
          file: this.file,
          type: 0,
        };
        service({
          method: "post",
          url: "/ship-type/upload",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: data,
        })
          .then((res) => {
            document.getElementsByClassName("addfile")[0].value = "";
            this.$message({
              message: "上传成功",
              type: "success",
            });
            this.file = "";
            this.fileName = "";
            this.uploadfile1 = "none";
            this.getRenderList();
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: "fail",
            });
          });
      } else {
        this.$message({
          message: "请先选择文件再上传",
          type: "warning",
        });
      }
    },
    async getShipType() {
      // /ship-type/get-ship-type-num
      let data = {
        type: 0,
      };
      await service({
        method: "post",
        url: "/ship-type/get-ship-type-num",
        params: data,
      })
        .then((e) => {
          this.shipTypeList = e.data;
        })
        .catch((err) => {});
    },
    // 获取列表数据
    async getRenderList() {
      let data = {};

      if (this.searchText) {
        data = {
          page: this.page,
          size: this.size,
          type: 0,
          // shipTypeNum: this.serchNum,
          searchText: this.searchText,
        };
      } else {
        data = {
          page: this.page,
          size: this.size,
          type: 0,
        };
      }
      await service({
        methods: "get",
        url: "/ship-type/find-one-page",
        params: data,
      })
        .then((e) => {
          this.totalPages = e.data.totalPages;
          this.totalNumber = e.data.totalElements;
          if (this.totalPages == 0) {
            this.totalPages = 1;
          }
          if (this.page < this.totalPages) {
            this.color1 = "#268FDE";
          } else {
            this.color1 = "#EBEBEB";
          }
          if (this.page == 1) {
            this.color = "#EBEBEB";
          } else {
            this.color = "#268FDE";
          }
          this.tableData = e.data.content;

          this.currentNum = e.data.numberOfElements;
        })
        .catch((err) => {});
    },
    formatterDate(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}/${month}/${day}`;
    },
    clearCanShu() {
      this.isActive = 1;
      this.bumpHeight = "";
      this.berthingMethod = "";
      this.fillingPosition = "";
      this.removeFilledShipIdList = [];
      this.filledShipListSave = [];
      this.filledShipList = [];
      this.removeFilledShipIdList = [];
      this.image = "";
      this.ifClickOne = false;
      this.huaiHeFenderPosition = [];
      this.haiGangFenderPosition = ["", ""];
      this.haiGangFillPosition = [];
      this.haiGangNitrogenTubeMatching = [];
      this.huaiHeRiskResearchTeam = "";
      this.haiGangCompatibilityCompatible = "";
      this.depthMoulded = "";
      this.huaiHeStsReportNumber = "";
      this.shipWidth = "";
      this.summerMaximumDraft = "";
      this.cargoTankType = "";
      this.shipLength = "";
      this.shareShipType = [];
      this.shipCompany = "";
      this.shipType = "";
      this.shipTypeNum = "";
      this.cargoTankCapacity = "";
      this.haiGangCompatibilityCompatible = "";
      this.haiGangFillStationPosition = [];
      this.huaiHeCompatibilityCompatible = "";
      this.huaiHeMoorCompatible = "";
      this.huaiHeResearchTeam = "";
      this.huaiHeCompletionTime = "";
      this.huaiHeStsReportNumber = "";
      this.haiGangReportNumber = "";
      this.haiGangMoorCompatible = "";
      this.haiGangResearchTeam = "";
      this.haiGangCompletionTime = "";
      this.haiGangRiskCompatible = "";
      this.haiGangRiskResearchTeam = "";
      this.haiGangRiskCompletionTime = "";
      this.haiGangJpoReportNumber = "";
      this.huaiHeRiskCompatible = "";
      this.huaiHeRiskResearchTeam = "";
      this.haiGangMoorImg = "";
      this.huaiHeMoorImg = "";
      this.haiGangRestrictedAreaImg = "";
      this.huaiHeRestrictedAreaImg = "";
      this.haiGangReportImg = "";
      this.huaiHeStsReportImg = "";
      this.haiGangJpoReportImg = "";
      this.huaiHeJpoReportImg = "";
      this.huaiHeEscapismReport = "";
      this.haiGangEscapismReport = "";
      this.haiGangRedRestrictedArea = "";
      this.haiGangYellowRestrictedArea = "";
      this.huaiHeYellowRestrictedArea = "";
      this.huaiHeRedRestrictedArea = "";
      this.fillingStation = [];
      this.liquid_connection_form = "";
      this.gas_connection_form = "";
      this.maxFillingRate = "";
      this.nitrogenPipeType = "";
      this.haiGangFilledShipModels = [];
      this.searchText1 = "";
      this.haiGangExcelJson = {
        C2: "",
        C3: "",
        C4: "",
        C5: "",
        C6: "",
        C7: "",
        E2: "",
        E3: "",
        E4: "",
        E5: "",
        E6: "",
        E7: "",
        F2: "",
        F5: "",
      };
      this.huaiHeExcelJson = {
        C2: "",
        C3: "",
        C4: "",
        C5: "",
        C6: "",
        C7: "",
        E2: "",
        E3: "",
        E4: "",
        E5: "",
        E6: "",
        E7: "",
        F2: "",
        F5: "",
      };
      this.huaiHeFilledShipModels = [];
      this.huaiHeFillStationPosition = [];
      this.huaiHeNitrogenTubeMatching = [];
      this.huaiHeFillPosition = [];
      this.id = "";
      this.data = {
        removeFilledShipIdList: [],
        bumpHeight: "",
        fillingPosition: "",
        image: "",
        berthingMethod: "",
        filledShipList: [],
        huaiHeFillPosition: [],
        huaiHeNitrogenTubeMatching: [],
        huaiHeFillStationPosition: [],
        huaiHeFilledShipModels: [],
        huaiHeFenderPosition: [],
        haiGangFenderPosition: ["", ""],
        haiGangFillPosition: [],
        haiGangNitrogenTubeMatching: [],
        huaiHeRiskResearchTeam: "",
        haiGangCompatibilityCompatible: "",
        depthMoulded: "",
        shipWidth: "",
        summerMaximumDraft: "",
        huaiHeStsReportNumber: "",
        cargoTankType: "",
        shipLength: "",
        shareShipType: [],
        shipCompany: "",
        shipType: "",
        shipTypeNum: "",
        cargoTankCapacity: "",
        haiGangCompatibilityCompatible: "",
        haiGangFillStationPosition: [],
        huaiHeCompatibilityCompatible: "",
        huaiHeMoorCompatible: "",
        huaiHeResearchTeam: "",
        huaiHeCompletionTime: "",
        huaiHeStsReportNumber: "",
        haiGangReportNumber: "",
        haiGangMoorCompatible: "",
        haiGangResearchTeam: "",
        haiGangCompletionTime: "",
        haiGangRiskCompatible: "",
        haiGangRiskResearchTeam: "",
        haiGangRiskCompletionTime: "",
        haiGangJpoReportNumber: "",
        huaiHeRiskCompatible: "",
        huaiHeRiskResearchTeam: "",
        haiGangExcelJson: {
          C2: "",
          C3: "",
          C4: "",
          C5: "",
          C6: "",
          C7: "",
          E2: "",
          E3: "",
          E4: "",
          E5: "",
          E6: "",
          E7: "",
          F2: "",
          F5: "",
        },
        huaiHeExcelJson: {
          C2: "",
          C3: "",
          C4: "",
          C5: "",
          C6: "",
          C7: "",
          E2: "",
          E3: "",
          E4: "",
          E5: "",
          E6: "",
          E7: "",
          F2: "",
          F5: "",
        },
        id: "",
        liquid_connection_form: "",
        gas_connection_form: "",
        maxFillingRate: "",
        fillingStation: [],
        nitrogenPipeType: "",
        haiGangFilledShipModels: [],
      };
    },

    clickLastPage() {
      if (this.page > 1) {
        this.page--;
        if (this.page == 1) {
          this.color = "#EBEBEB";
        } else {
          this.color = "#268FDE";
        }
        if (this.page < this.totalPages) {
          this.color1 = "#268FDE";
        }
        this.getRenderList();
      } else {
        this.color = "#EBEBEB";
      }
    },
    clickNextPage() {
      if (this.page < this.totalPages) {
        this.page++;
        this.color = "#268FDE";
        if (this.page == this.totalPages) {
          this.color1 = "#EBEBEB";
        } else {
          this.color1 = "#268FDE";
        }
      }
      this.getRenderList();
    },
    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
    skipPage(a, b) {
      this.clickEdit(b);
      this.isActive = a;
    },
    async getfillPosition() {
      let data = {
        dicTypeTypeId: 21,
      };
      await service({
        methods: "get",
        url: "/dict-item/find-all",
        params: data,
      })
        .then((e) => {
          this.positionAll = e.data;
        })
        .catch((err) => {});
    },
    async getbumpHeightAll() {
      let data = {
        dicTypeTypeId: 22,
      };
      await service({
        methods: "get",
        url: "/dict-item/find-all",
        params: data,
      })
        .then((e) => {
          this.bumpHeightAll = e.data;
        })
        .catch((err) => {});
    },
    async getshose_connection_formAll() {
      let data = {
        dicTypeTypeId: 23,
      };
      await service({
        methods: "get",
        url: "/dict-item/find-all",
        params: data,
      })
        .then((e) => {
          this.shose_connection_formAll = e.data;
        })
        .catch((err) => {});
    },
    async getfillingStationAll() {
      let data = {
        dicTypeTypeId: 24,
      };
      await service({
        methods: "get",
        url: "/dict-item/find-all",
        params: data,
      })
        .then((e) => {
          this.fillingStationAll = e.data;
        })
        .catch((err) => {});
    },
    async getnitrogenPipeTypeAll() {
      let data = {
        dicTypeTypeId: 25,
      };
      await service({
        methods: "get",
        url: "/dict-item/find-all",
        params: data,
      })
        .then((e) => {
          this.nitrogenPipeTypeAll = e.data;
        })
        .catch((err) => {});
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作
      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
    $route(to, from) {
      // 在这里根据参数的变化执行刷新页面的逻辑
      if (to.name == from.name) {
        this.close();
      }
    },
  },

  created() {
    this.sendMessage();

    this.role = sessionStorage.getItem("role");
    this.findALl();
    this.token = JSON.parse(sessionStorage.getItem("token"));
    this.getRenderList();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    this.sendMessage();
    this.getShipType();
    this.getShipPictrue();
    this.getShipTypeAll();
    this.getcargoTankType();
    this.getberthingMethod();
    this.getfillPosition();
    this.getbumpHeightAll();
    this.getshose_connection_formAll();
    this.getfillingStationAll();
    this.getnitrogenPipeTypeAll();
    let that = this;

    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.spliceButtonTextActive {
  border: 1px solid #22b14c;
  color: #22b14c;
}
.loadHomeWorkIneer::-webkit-scrollbar {
  width: 5px; /* 自定义滚动条的宽度 */
  height: 5px; /* 如果需要自定义垂直滚动条的高度 */
}

/* 自定义滚动条滑块的颜色 */
.loadHomeWorkIneer::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
  border-radius: 10px; /* 可选：为滚动条滑块添加圆角 */
}

/* 自定义滚动条轨道的颜色 */
.loadHomeWorkIneer::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px; /* 可选：为滚动条轨道添加圆角 */
}
.manyInput::-webkit-scrollbar {
  width: 5px; /* 自定义滚动条的宽度 */
  height: 5px; /* 如果需要自定义垂直滚动条的高度 */
}

/* 自定义滚动条滑块的颜色 */
.manyInput::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
  border-radius: 10px; /* 可选：为滚动条滑块添加圆角 */
}

.manyInput::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px; /* 可选：为滚动条轨道添加圆角 */
}
.manyInput {
  width: 1170px;
  height: 80vh;
  margin: auto;
  overflow: auto;

  .iuptInnerContain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    .inputInner {
      width: 375px;
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      color: #365488;
      .name {
        width: 160px;
        height: 100%;
        line-height: 4vh;
        text-align: right;
        font-size: 15px;
      }

      .inputContainer {
        width: 200px;
        margin-left: 5px;
      }
      .el-input__inner {
        background: white !important;
      }
      input {
        width: 210px;
        height: 34px;
        margin-left: 5px;
        border-radius: 5px;
        text-indent: 1em;
        outline: none;
        border: none;
        background: white !important;
        color: #365488;
        border: 1px solid #dcdfe6;
      }
      input::-webkit-input-placeholder {
        color: #a8abb2;
      }
      input[type="date"] {
        color: #365488;
        text-align: left;
        border-radius: 4px;
        box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
      }
    }
    .jianrongList {
      width: 90%;
      line-height: 30px;
      // background: #fafafa;
      margin: auto;
      display: flex;
      align-items: center;

      justify-content: center;
      font-weight: 600;
      font-size: 14px;
      color: #909399;
      border: 1px solid #ebeef5;
      border-bottom: none;

      .line1 {
        width: 20%;
        height: 30px;
        padding-left: 5px;
        border-right: 1px solid #ebeef5;
        text-align: center;
      }
      .line2 {
        width: 30%;
        height: 30px;
        padding-left: 5px;
        border-right: 1px solid #ebeef5;
        text-align: center;
        img {
          width: 90%;
          height: 120px;
          object-fit: fill;
        }
        input {
          width: 100%;
          border: none;
          outline: none;
          font-size: 18px;
          // background: #fafafa;
          text-align: center;
          height: 28px;
          font-weight: 600;
          font-size: 14px;
          color: #909399;
        }
      }
      .line3 {
        width: 30%;
        padding-left: 5px;
        text-align: center;
        img {
          width: 90%;
          height: 120px;
          object-fit: fill;
        }
        input {
          width: 100%;
          border: none;
          outline: none;
          height: 28px;
          font-size: 18px;
          // background: #fafafa;
          text-align: center;
          font-weight: 600;
          font-size: 14px;
          color: #909399;
        }
      }
      .line4 {
        width: 20%;
        height: 30px;
        text-align: center;
        border-left: 1px solid #ebeef5;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        .el-checkbox {
          scale: 1.5;
        }
        input {
          width: 100%;
          border: none;
          outline: none;
          height: 28px;
          font-size: 18px;
          // background: #fafafa;
          text-align: center;
          font-weight: 600;
          font-size: 14px;
          color: #909399;
        }
      }
    }
    .el-date-picker .el-picker-panel {
      background-color: white !important; /* 你想要的背景颜色 */
    }
  }
  .line {
    width: 100%;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 2px solid #c0c0c0;
  }
  .centerInput {
    width: 100%;
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #c0c0c0;
    .bigName {
      width: 100%;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      color: black;
    }
    .centerNamePut {
      width: 555px;

      .inputInner {
        width: 375px;
        height: 35px;
        // background: blue;
        margin-right: 10px;
        margin-top: 10px;
        display: flex;
        // align-items: center;
        // justify-content: space-between;
        color: #365488;
        .name {
          width: 150px;
          height: 100%;
          line-height: 4vh;
          text-align: right;
          font-size: 15px;
        }

        .inputContainer {
          width: 210px;
          margin-left: 5px;
        }
        .el-input__inner {
          background: white !important;
        }
        input {
          width: 220px;
          height: 34px;
          margin-left: 5px;
          border-radius: 5px;
          text-indent: 1em;
          outline: none;
          border: none;
          background: white !important;
          color: #365488;
          border: 1px solid #dcdfe6;
        }
        input::-webkit-input-placeholder {
          color: #a8abb2;
        }
        input[type="date"] {
          color: #365488;
          text-align: left;
          border-radius: 4px;
          box-sizing: border-box;
        }
      }
      .el-date-picker .el-picker-panel {
        background-color: white !important;
      }
    }
    .centerLine {
      height: 100%;
      width: 2px;
      height: 350px;
      border-left: 2px solid #c0c0c0;
    }
  }
  .centerInput1 {
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    // align-items: center;
    // border-bottom: 2px solid #c0c0c0;
    padding-bottom: 10px;

    .centerNamePut {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .inputInner {
        width: 400px;
        height: 35px;
        // background: blue;
        margin-right: 10px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        color: #365488;
        .name {
          width: 125px;
          height: 100%;
          line-height: 4vh;
          text-align: right;
          font-size: 15px;
        }
        .name1 {
          width: 110px;
          height: 100%;
          background: #0470c1;
          text-align: center;
          line-height: 4vh;
          border-radius: 5px;
          font-size: 15px;
          color: white;
        }
        .name2 {
          width: 130px;
          margin-right: 10px;
          height: 100%;
          background: #0470c1;
          text-align: center;
          line-height: 4vh;
          border-radius: 5px;
          font-size: 15px;
          color: white;
        }

        .inputContainer {
          width: 220px;
          margin-left: 5px;
        }
        .el-input__inner {
          background: white !important;
        }
        input {
          width: 240px;
          height: 34px;
          margin-left: 5px;
          border-radius: 5px;
          text-indent: 1em;
          outline: none;
          border: none;
          background: white !important;
          color: #365488;
          border: 1px solid #dcdfe6;
        }
      }
      .el-date-picker .el-picker-panel {
        background-color: white !important; /* 你想要的背景颜色 */
      }
    }
    .centerLine {
      height: 100%;
      width: 2px;
      height: 520px;
      border-left: 2px solid grey;
    }
    .centerLine1 {
      height: 100%;
      width: 2px;
      height: 670px;
      border-left: 2px solid grey;
    }
  }
}
.bigName {
  width: 100%;
  line-height: 30px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: black;
}
.dialogText {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 25px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}
.dialogText1 {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 20px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}

.dialog,
.dialog1 {
  width: 100%;
  height: 100%;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}

.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;
    overflow-y: hidden;
    overflow: auto;

    .loadAndSearch {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;
  height: 65vh;
  // background: red;
}
.centerPicContain {
  width: 90%;
  margin: auto;
  height: 150px;
  // background: blue;
  margin-top: 5px;
}
div {
  box-sizing: border-box;
}
.aliLIne {
  width: 100%;
  display: flex;
  height: 140px;
  border: 1px solid #c0c0c0;
  color: #3e3d3d;
  text-align: center;
  overflow: hidden;
  font-size: 14px;
  .tableLeft1 {
    width: 17%;
    height: 140px;
    .left1Child1 {
      width: 100%;
      height: 20px;
      border-right: 1px solid #c0c0c0;
    }

    .left1Child2,
    .left1Child3 {
      width: 100%;
      height: 60px;
      border-top: 1px solid #c0c0c0;
      border-right: 1px solid #c0c0c0;
      // display: flex;
      align-content: center;
      justify-content: center;
    }
  }
  .tableLeft2 {
    width: 33%;
    .left1Child1 {
      width: 100%;
      height: 20px;
      border-right: 1px solid #c0c0c0;
    }
    .left1Child2 {
      width: 100%;
      height: 60px;
      border-top: 1px solid #c0c0c0;
      .splice {
        width: 100%;
        display: flex;
        div {
          height: 20px;
          border-right: 1px solid #c0c0c0;
          border-bottom: 1px solid #c0c0c0;
        }
        .spliceRigth {
          width: 40%;
          input {
            outline: none;
            border: none;
            width: 100% !important;
            text-align: center;
          }
        }
        .spliceLeft {
          width: 60%;
        }
      }
    }
  }
  .tableLeft3 {
    width: 33%;
  }
  .tableLeft4 {
    width: 17%;
    .left1Child1 {
      height: 20px;
    }
    .left1Child2 {
      width: 100%;
      height: 60px;
      border-top: 1px solid #c0c0c0;
      input {
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        text-align: center;
      }
    }
  }
}
.dialog3 {
  width: 410px;
  height: 270px;
  border-radius: 10px;
  background: #f0f1f4;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;
  z-index: 100;
}

.dialog3 .upContain {
  width: 152px;
  height: 28px;
  margin: auto;
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog3 .upContain .addfile {
  width: 100%;
  height: 28px;
  font-size: 16px;
}

.dialog3 .fileName {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog3 .fileName div {
  width: 100%;

  text-align: center;
  color: black;
}

.dialog3 .upContain .addfile::file-selector-button {
  width: 100%;
  height: 28px;
  background-color: #268fde;
  border: 1px solid #268fde;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
}

.dialog3 .upFileSrue {
  width: 152px;
  height: 20px;
  font-size: 16px;
  line-height: 20px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog3 .upFileSrue .buttonUpdata {
  outline: none;
  border: none;
  width: 65px;
  border-radius: 0.5vh;
  height: 20px;
  line-height: 20px;
  background: #e5e5e5;
  font-size: 16px;
  color: white;
}

.dialog3 .upFileSrue .buttonUpdata1 {
  background: #268fde;
}
.shipTypeListName {
  width: 90%;
  height: 40px;
  background: #fafafa;
  margin: auto;
  border: 1px solid #ebeef5;
  border-bottom: none;
  margin-top: 10px;
  input {
    outline: none;
    border: none;
    background: #fafafa;
    width: 100%;
    height: 100%;
    text-align: center;
  }
}
.cell {
  height: 100% !important;
}
</style>
